【移动端网页布局】flex 弹性布局 ⑤ ( 设置侧轴单行子元素排列方式 | align-items 样式说明 | 代码示例 )

news2024/11/23 19:19:39

文章目录

  • 一、设置子元素是否换行 : align-items 样式说明
    • 1、 align-items 样式引入
    • 2、 align-items 样式属性值
  • 二、代码示例
    • 1、 代码示例 - 默认样式
    • 2、 代码示例 - 设置主轴水平居中
    • 3、 代码示例 - 设置侧轴垂直居中
    • 4、 代码示例 - 设置侧轴从下到上排列
    • 5、 代码示例 - 设置侧轴拉伸排列





一、设置子元素是否换行 : align-items 样式说明



1、 align-items 样式引入


在 flex 弹性布局容器 中 , 通过设置 justify-content 属性 , 可以实现主轴方向上水平居中的效果 ;

如果想要设置 垂直居中 效果 , 就是设置 侧轴 的居中对齐效果 ， 就需要为 flex 容器设置 align-items 样式 ;


2、 align-items 样式属性值


align-items 样式属性值 :

  • flex-start , 默认值 , 默认情况下主轴是 从左到右 , 侧轴 从上到下 , 此处设置默认值 , 就是侧轴 从上到下的设置 ;
  • flex-end , 侧轴的元素 从下到上 ;
  • center , 侧轴元素 垂直居中 ;
  • stretch , 侧轴元素 拉伸 ;




二、代码示例



1、 代码示例 - 默认样式


下面的代码只设置了 display: flex; 样式 , 没有设置其它样式 , 作为对比参照 ;


代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex 弹性布局</title>
    <style>
        div {
            /* 将展示样式设置为 flex 即可启用弹性布局 */
            display: flex;
            /* 布局宽度 500 像素 */
            width: 500px;
            /* 布局高度 500 像素 */
            height: 500px;
            /* 设置背景颜色 */
            background-color: pink;
        }
        
        div span {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>

展示效果 :

在这里插入图片描述


2、 代码示例 - 设置主轴水平居中


下面的代码在设置了 display: flex; 样式基础上 , 设置了

            /* 主轴水平居中 */
            justify-content: center;

样式 , 令主轴水平居中 ;


代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex 弹性布局</title>
    <style>
        div {
            /* 将展示样式设置为 flex 即可启用弹性布局 */
            display: flex;
            /* 主轴水平居中 */
            justify-content: center;
            /* 布局宽度 500 像素 */
            width: 500px;
            /* 布局高度 500 像素 */
            height: 500px;
            /* 设置背景颜色 */
            background-color: pink;
        }
        
        div span {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>

效果展示 :

在这里插入图片描述


3、 代码示例 - 设置侧轴垂直居中


下面的代码在设置了 display: flex; 样式基础上 , 设置了

            /* 设置侧轴垂直居中 */
            align-items: center;

样式 , 令侧轴垂直居中 ;


代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex 弹性布局</title>
    <style>
        div {
            /* 将展示样式设置为 flex 即可启用弹性布局 */
            display: flex;
            /* 主轴水平居中 */
            justify-content: center;
            /* 设置侧轴垂直居中 */
            align-items: center;
            /* 布局宽度 500 像素 */
            width: 500px;
            /* 布局高度 500 像素 */
            height: 500px;
            /* 设置背景颜色 */
            background-color: pink;
        }
        
        div span {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>

展示效果 :

在这里插入图片描述


4、 代码示例 - 设置侧轴从下到上排列


下面的代码在设置了 display: flex; 样式基础上 , 设置了

            /* 设置侧轴从下到上排列 */
            align-items: flex-end;

样式 , 令侧轴从下到上排列 ;


代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex 弹性布局</title>
    <style>
        div {
            /* 将展示样式设置为 flex 即可启用弹性布局 */
            display: flex;
            /* 主轴水平居中 */
            justify-content: center;
            /* 设置侧轴从下到上排列 */
            align-items: flex-end;
            /* 布局宽度 500 像素 */
            width: 500px;
            /* 布局高度 500 像素 */
            height: 500px;
            /* 设置背景颜色 */
            background-color: pink;
        }
        
        div span {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>

展示效果 :

在这里插入图片描述


5、 代码示例 - 设置侧轴拉伸排列


下面的代码在设置了 display: flex; 样式基础上 , 设置了

            /* 设置侧轴拉伸排列 */
            align-items: stretch;

样式 , 令侧轴拉伸排列 ;

注意 , 要把 flex 项目的高度注释掉 , 否则没有任何效果 ;

        div span {
            width: 100px;
            /* 使用 align-items: stretch; 样式不能设置高度 */
            /* height: 100px; */
            background-color: skyblue;
            margin: 10px;
        }

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex 弹性布局</title>
    <style>
        div {
            /* 将展示样式设置为 flex 即可启用弹性布局 */
            display: flex;
            /* 主轴水平居中 */
            justify-content: center;
            /* 设置侧轴拉伸排列 */
            align-items: stretch;
            /* 布局宽度 500 像素 */
            width: 500px;
            /* 布局高度 500 像素 */
            height: 500px;
            /* 设置背景颜色 */
            background-color: pink;
        }
        
        div span {
            width: 100px;
            /* 使用 align-items: stretch; 样式不能设置高度 */
            /* height: 100px; */
            background-color: skyblue;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>

展示效果 :
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/500070.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

C++之类和对象（二）

C++之类和对象（二）

目录 前言 类的6个默认成员函数 1.构造函数 1.1 概念 1.2 特性 2. 析构函数 2.1 概念 2.2 特性 3. 拷贝构造函数 3.1 概念 3.2 特征 4.赋值运算符重载 4.1 运算符重载 4.2.赋值运算符重载 4.3 前置和后置重载 5. .const成员 6.取地址及const取地址操作符重载 前…
阅读更多...
【二叉搜索树】

【二叉搜索树】

1 二叉搜索树概念 二叉搜索树又称二叉排序树&#xff0c;它或者是一棵空树 &#xff0c;或者是具有以下性质的二叉树 : 若它的左子树不为空&#xff0c;则左子树上所有节点的值都小于根节点的值 若它的右子树不为空&#xff0c;则右子树上所有节点的值都大于根节点的值 它的左…
阅读更多...
Android“真正的”模块化

Android“真正的”模块化

作者&#xff1a;bytebeats 模块化背后的原则概述 “如果说SOLID原则告诉我们如何将砖块排列成墙和房间, 那么组件原则则告诉我们如何将房间排列成建筑.” ~ Robert C. Martin, Clean Architecture 你应该分层打包还是分特性打包?还有其他方法吗? 如何提高项目的编译时间? 你…
阅读更多...
将Python环境迁移到另一台设备上

将Python环境迁移到另一台设备上

本方法可以将一台电脑上的python环境迁移到另一台电脑上&#xff0c;可以省去一个一个包pip的麻烦。本文以pytorch的迁移为例。 一、从源环境备份安装包 在原来的电脑的Conda控制台中使用语句 pip freeze > c:\myrequirement.txt 后面跟的参数是文件的路径和文件名&#x…
阅读更多...
Spring MVC自定义拦截器--Spring MVC异常处理

Spring MVC自定义拦截器--Spring MVC异常处理

目录 自定义拦截器 什么是拦截器 ● 说明 自定义拦截器执行流程分析图 ● 自定义拦截器执行流程说明 自定义拦截器应用实例 ● 应用实例需求 创建MyInterceptor01 创建FurnHandler类 在 springDispatcherServlet-servlet.xml 配置拦截器 第一种配置方式 第二种配置方…
阅读更多...
linux 互斥量pthread_mutex

linux 互斥量pthread_mutex

专栏内容&#xff1a;linux下并发编程个人主页&#xff1a;我的主页座右铭&#xff1a;天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物&#xff0e; 目录 前言 概述 原理 初始化 进程和线程使用的不同点 死锁 接口 基本API 属性设置 …
阅读更多...
探索机器翻译：从统计机器翻译到神经机器翻译

探索机器翻译：从统计机器翻译到神经机器翻译

❤️觉得内容不错的话&#xff0c;欢迎点赞收藏加关注&#x1f60a;&#x1f60a;&#x1f60a;&#xff0c;后续会继续输入更多优质内容❤️ &#x1f449;有问题欢迎大家加关注私戳或者评论&#xff08;包括但不限于NLP算法相关&#xff0c;linux学习相关&#xff0c;读研读博…
阅读更多...
Osek网络管理及ETAS实现

Osek网络管理及ETAS实现

OSEK/VDX&#xff08;Offene Systeme und deren Schnittstellen fr die Elektronik in Kraftfahrzeugen / Vehicle Distributed eXecutive&#xff09;是一种用于嵌入式系统&#xff08;尤其是汽车电子控制单元&#xff09;的开放标准。它旨在提供一种统一、可互操作的软件架构…
阅读更多...
关于 《python 从入门到实践》的 matplotlib 随机漫步小项目

关于 《python 从入门到实践》的 matplotlib 随机漫步小项目

使用 python 生成随机漫步数据&#xff0c;再使用 matplotlib 将数据呈现。 所谓随机漫步&#xff1a; 每次行走的路径都是完全随机的&#xff0c;就像蚂蚁在晕头转向的情况下&#xff0c;每次都沿随机方向前行路径。 在自然界&#xff0c;物理学&#xff0c;生物学&#xff0…
阅读更多...
【Linux】Job for network.service failed(网卡启动报错）

【Linux】Job for network.service failed(网卡启动报错）

上图是Linux网卡启动报错的情况 这是由于cat/etc/sysconfig/network-scripts/ifcfg-xxx 中HWADDR的MAC地址和ifconfig中的MAC地址不一样&#xff0c;或者缺少cat/etc/sysconfig/network-scripts/ifcfg-xxx 中HWADDR的MAC地址 1.查看ifconfig中的MAC地址 图中00&#xff1a;0c…
阅读更多...
【新星计划-2023】IP地址是什么？IP地址的主要功能是什么？

【新星计划-2023】IP地址是什么？IP地址的主要功能是什么？

IP地址在生活中是很常见的&#xff0c;我们所使用的手机、电脑等等&#xff0c;都有一个IP地址&#xff0c;那么IP地址是什么&#xff1f;通过IP地址又能干什么&#xff1f;下文就来给大家详细的讲解一下。 一、什么是IP地址 通常我们说的IP地址多数是指互联网中联网的IP地址…
阅读更多...
Java 基础进阶篇（十一）—— Arrays 与 Collections 工具类

Java 基础进阶篇（十一）—— Arrays 与 Collections 工具类

文章目录 一、Arrays工具类1.1 Arrays 类常用方法1.2 对于 Comparator 比较器的支持1.3 Arrays 的综合应用1.3.1 应用一&#xff1a;数组的降序排序1.3.2 应用二&#xff1a;根据学生年龄进行排序 二、Collections工具类2.1 Collections 类常用方法2.2 Collections 排序相关 AP…
阅读更多...
神经网络实验---梯度下降法

神经网络实验---梯度下降法

本次实验主要目的是掌握梯度下降法的基本原理&#xff0c;能够使用梯度下降法求解一元和多元线性回归问题。 文章目录 目录 文章目录 1. 实验目的 2. 实验内容 3. 实验过程 题目一&#xff1a; 题目二&#xff1a; 题目三&#xff1a; 实验小结&讨论题 1. 实验目的 ① 掌握…
阅读更多...
〖Python网络爬虫实战㉓〗- Ajax数据爬取之什么是Ajax

〖Python网络爬虫实战㉓〗- Ajax数据爬取之什么是Ajax

订阅&#xff1a;新手可以订阅我的其他专栏。免费阶段订阅量1000 python项目实战 Python编程基础教程系列&#xff08;零基础小白搬砖逆袭) 说明&#xff1a;本专栏持续更新中&#xff0c;目前专栏免费订阅&#xff0c;在转为付费专栏前订阅本专栏的&#xff0c;可以免费订阅付…
阅读更多...
23.5.7总结（学习通项目思路）

23.5.7总结（学习通项目思路）

项目思路&#xff1a; 注册&#xff1a;输入邮箱&#xff08;判重&#xff09;&#xff0c;两次输入密码&#xff0c;获得的正确的验证码&#xff0c;获得不重复的用户名。 登录&#xff1a;输入用户名和密码登录。 忘记密码&#xff1a;输入邮箱&#xff08;和用户名&#…
阅读更多...
RK3588平台开发系列讲解（进程篇）可执行文件内部结构

RK3588平台开发系列讲解（进程篇）可执行文件内部结构

平台内核版本安卓版本RK3588Linux 5.10Android 12文章目录 一、 ELF 文件的两大组成部分二、文件头三、程序头和节区头四、ELF 文件的细节结构沉淀、分享、成长，让自己和他人都能有所收获！😄 📢在 Linux 中，二进制可执行文件的标准格式叫做 ELF（Executable and Linkabl…
阅读更多...
ARP协议结构

ARP协议结构

文章目录 概念ARP协议格式ARP协议的作用ARP协议的工作流程 首先提出一个问题&#xff0c;来理解ARP解决什么问题 已知报文在数据链路层传输的过程中&#xff08;假设是主机A到主机B&#xff09;&#xff0c;是通过路由器之间的跳转&#xff0c;根据路由表&#xff0c;结合目的…
阅读更多...
【论文】SimCLS:一个简单的框架 摘要总结的对比学习（1）

【论文】SimCLS:一个简单的框架 摘要总结的对比学习（1）

SimCLS:摘要总结的对比学习(1&#xff09; 写在最前面模型框架 摘要1 简介 写在最前面 SimCLS: A Simple Framework for Contrastive Learning of Abstractive Summarization&#xff08;2021ACL会议&#xff09; https://arxiv.org/abs/2106.01890 论文&#xff1a;https://…
阅读更多...
【c语言小demo】登录demo | 账号密码验证功能

【c语言小demo】登录demo | 账号密码验证功能

创作不易&#xff0c;本篇文章如果帮助到了你&#xff0c;还请点赞 关注支持一下♡>&#x16966;<)!! 主页专栏有更多知识&#xff0c;如有疑问欢迎大家指正讨论&#xff0c;共同进步&#xff01; 给大家跳段街舞感谢支持&#xff01;ጿ ኈ ቼ ዽ ጿ ኈ ቼ ዽ ጿ ኈ ቼ …
阅读更多...
postgresql insert ddl执行流程分析

postgresql insert ddl执行流程分析

专栏内容&#xff1a;postgresql内核源码分析个人主页&#xff1a;我的主页座右铭&#xff1a;天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物&#xff0e; 目录 前言 总体流程 调用堆栈 执行接口说明 详细流程分解 ExecInsert对于普通表…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023