Flex弹性布局

最新推荐文章于 2024-07-21 21:06:06 发布
最新推荐文章于 2024-07-21 21:06:06 发布
阅读量393 收藏
点赞数
分类专栏： # CSS布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45678090/article/details/107381284
版权

目录

概述

Flex布局，可以简便、完整、响应式地实现各种页面布局。
目前，它已经得到了所有浏览器的支持。
这意味着，现在就能很安全地使用这项功能。
作用在flex容器上作用在flex子项上
flex-directionorder
flex-wrapflex-grow
flex-flowflex-shrink
justify-contentflex-basis
align-itemsflex
align-contentalign-self

作用于自己身上的flex CSS属性

flex-direction

flex-direction用来控制子项整体布局方向。
是从左往右还是从右往左，时从上往下还是从下往上。
取值含义
row默认值，显示为行。方向为当前文档水平流方向，默认情况下时从左往右
row-reverse显示为行。但方向和row属性值时反的
column显示为列
column-reverse显示为列。但方向和colummn属性值是反的

flex-dirction
示例：

<style>
    .fu{
        display: flex;
        width: 300px;
        height: 300px;
        border: 1px solid green;
        margin: 30px auto;
        /*之后的修改属性取值都是只修改下面这一句
        其他的不变，若有修改会标出
        flex-direction: row;*/
    }
    .fu div{
        width: 200px;
        height: 200px;
        border: 1px solid red;
    }
</style>
<body>
    <div class="fu">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>

不添加flex-dirction属性（就像上面代码那样，注释了）：
在这里插入图片描述
注意：此时空间会自适应，但是如果flex内的容器的内容过多时，那么它就算是溢出也不会自动换行。

属性：flex-dirction:row
flex-direction:row

属性：flex-dirction:row-reverse

flex-direction:row-reverse
属性：flex-direction:column
flex-dirction:column

属性：flex-dirction:column-reverse

在这里插入图片描述

flex-wrap

flex-wrap用来控制子项整体单行显示还是换行显示。
取值含义
nowrap默认值，表示单行显示，不换行。
wrap宽度不足换行显示
wrap-reverse宽度不足换行显示，但是是从下往上开始，也就是原本换行在下面的子项现在跑到上面。

实例：

<style>
    .fu{
        display: flex;
        width: 300px;
        height: 300px;
        border: 1px solid green;
        margin: 30px auto;
        flex-direction: row;
        /* 之后的修改属性取值都是只修改下面这一句
            其他的不变，若有修改会标出
        flex-wrap: nowrap; */
    }
    .fu div{
        width: 50px;
        height: 50px;
        border: 1px solid red;
    }
</style>
<body>
    <div class="fu">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
    </div>
</body>

不添加flex-wrap属性
在这里插入图片描述
属性：flex-wrap:nowrap
由于是默认值，所以，基本与不写一样。
在这里插入图片描述
属性：flex-wrap:wrap
在这里插入图片描述
属性：flex-wrap:warp-reverse
在这里插入图片描述

flex-flow

flex-flow属性是flex-direction和flex-wrap的缩写。
表示flex布局的flow流动特性。
第一个值表示方向，第二个值表示换行，中间用空格隔开。

示例：

<style>
    .fu{
        display: flex;
        width: 300px;
        height: 300px;
        border: 1px solid green;
        margin: 30px auto;
		/*下面两个属性可以直接缩写成：
		flex-flow：colum wrap-reverse */
        flex-direction: column;
        flex-wrap: wrap-reverse; 
    }
    .fu div{
        width: 50px;
        height: 50px;
        border: 1px solid red;
    }
</style>
<body>
    <div class="fu">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
    </div>
</body>

都长这样：
在这里插入图片描述

justify-content

justify-content属性决定了主轴方向上子项的对齐方式和分布方式。
取值含义
flex-strart默认值，表现为起始位置对齐
felx-end表现为结束位置对齐
center表现为居中对齐
space-between表现为两端对齐。between的意思是多余的空白间距只在元素中间区域分配
space-aroundaround的意思是每个flex子项两侧都是环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半。
space-evenlyevenly是均称、平等的意思。也就是视觉上，每个flex子项两侧空白间距完全相等。

示例：

<style>
    .fu{
        display: flex;
        width: 300px;
        height: 300px;
        border: 1px solid green;
        margin: 30px auto;
        justify-content: flex-start;
    }
    .fu div{
        width: 50px;
        height: 50px;
        border: 1px solid red;
    }
</style>
<body>
    <div class="fu">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>

属性：justify-content:felx-start(由于是默认，所以不写的话，长的基本也一样)
在这里插入图片描述

属性：justify-content:flex-end
在这里插入图片描述
属性：justify-content:center
在这里插入图片描述
属性：justify-content:space-between
在这里插入图片描述
属性：justify-content:space-around
在这里插入图片描述
属性：justify-content:space-evenly
在这里插入图片描述
注：
around是子容器的周边是固定值，头或尾的空白和两个容器之间的距离不同（一般头或尾的距离是容器之间的距离的一半）。
evenly是所有的空白平均分配，就算是头和尾，也与两个容器之间的距离相同。

align-items

align-items中的items指的就是flex子项们。
因此align-items指的就是felx子项们相对于flex容器在侧轴方向上的对齐方式。
取值含义
stretch默认值，flex子项拉伸
flex-start表现为容器顶部对齐
flex-end表现为容器底部对齐
center表现为垂直居中对齐

示例：

<style>
    .fu{
        display: flex;
        width: 300px;
        height: 300px;
        border: 1px solid green;
        margin: 30px auto;
        justify-content: space-evenly;
        align-items: stretch;
    }
    .fu div{
        width: 50px;
        /* 此时高度被取消 内部容器会高度自适应父容器*/
        /* height: 50px; */
        border: 1px solid red;
        text-align: center;
    }
</style>
<body>
    <div class="fu">
        <div>最短的文本</div>
        <div>这一条是四条文本中最最最长的一条</div>
        <div>这一条就一般般还好</div>
        <div>这一条也是一般般啦</div>
    </div>
</body>

属性：align-items:stretch（由于是默认，所以写与不写差不多）
在这里插入图片描述
属性：align-items:flex-start
在这里插入图片描述
属性：align-items:flex-end
在这里插入图片描述
属性：align-items:center
在这里插入图片描述

align-content

align-content可以看出和justify-content是相似且对立的属性。
如果所有flex子项只有一行，则align-content属性是没有任何效果的。
取值含义
stretch默认值。每行felx子元素都等比例拉伸。例：如果共有两行flex子元素，则每行拉伸高度是50%
flex-start表现为起始位置对齐
flex-end表现为结束位置对齐
center表现为居中对齐
space-between表现为两端对齐
space-around每一行元素上下都享有独立不重叠的空白空间。
space-evenly每一行元素都完全上下等分

示例：

<style>
    .fu{
        display: flex;
        width: 300px;
        height: 300px;
        border: 1px solid green;
        margin: 30px auto;
        flex-flow: row wrap;
        justify-content: space-evenly;
        align-items: flex-start;
        align-content: stretch;
    }
    .fu div{
        width: 50px;
        /* 此时高度被取消 */
        /* height: 50px; */
        border: 1px solid red;
        text-align: center;
    }
</style>
</head>
<body>
    <div class="fu">
        <div>最短的文本</div>
        <div>这一条是四条文本中最最最长的一条</div>
        <div>这一条就一般般还好</div>
        <div>这一条也是一般般啦</div>
        <div>最短的文本</div>
        <div>这一条是四条文本中最最最长的一条</div>
        <div>这一条就一般般还好</div>
        <div>这一条也是一般般啦</div>
    </div>
</body>

属性： align-content:stretch（默认，设置与不设置基本相同）
在这里插入图片描述
属性：align-content:flex-start
在这里插入图片描述
属性：align-content:flex-end
在这里插入图片描述
属性：align-content:center
在这里插入图片描述
属性：align-content:space-between
在这里插入图片描述
属性：align-content:space-around
在这里插入图片描述
属性：align-content:space-evenly
在这里插入图片描述

-------------------------------到此flex针对父元素的属性，基本介绍完了--------------------------------------

作用于子项身上的flex CSS属性

取值含义
order可以通过设置order改变某一个flex子项的排列位置。所有flex子项的默认order属性值是0
flex-grow属性中的grow是扩展的意思，扩展的就是flex子项所占据的宽度，扩展所侵占的空间就是出去元素外的剩余的空白间隙。默认值为0
flex-shrink属性中的shrink是“收缩”的意思，flex-shrink主要处理当flex容器空间不足的时候，单个元素的收缩比例。默认值是1。
flex-basisflex定义了分配剩余空间之前元素的默认大小
flexflex属性是flex-grow,flex-shrink和flex-basis的缩写。
align-selfalign-self指的是控制单独某一个flex子项的垂直对齐方式。

order

示例：

<style>
    .fu{
        display: flex;
        width: 300px;
        height: 300px;
        border: 1px solid #000;
        margin: 50px auto;
    }
    .fu div{
        width: 50px;
        border: 1px solid red;
    }
    /* .fu div:first-child{
        order: 1;
    } 
    .fu div:last-child{
        order:2;
    }*/
</style>
<body>
    <div class="fu">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</body>

未注释之前
在这里插入图片描述

注释之后：
在这里插入图片描述

flex-grow

示例：

<style>
    .fu{
        display: flex;
        width: 300px;
        height: 300px;
        background: #000;
        margin: 50px auto;
    }
    .fu div{
        width: 50px;
        background: red;
    }
    /* .fu div:first-child{
        flex-grow:0.4;
        background: blue;
    }
    .fu div:nth-child(3){
        flex-grow:0.2;
        background: #fff;
    }
    .fu div:last-child{
        flex-grow: 0.4;
        background: green;
    } */
</style>
<body>
    <div class="fu">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</body>

未注释之前：
在这里插入图片描述
注释之后：
在这里插入图片描述
如果加起来数值大于1的话，则将剩余的空白按比例分配。

flex-shrink

<style>
    .fu{
        display: flex;
        width: 300px;
        height: 300px;
        border: 1px solid #000;
        margin: 50px auto;
    }
    .fu div{
        width: 50px;
        border: 1px solid red;
    }
    /* .fu div:first-child{
        flex-shrink: 0;
        border:1px solid blue
    } */
</style>
<body>
    <div class="fu">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
    </div>
</body>

为注释之前：
flex-shrink:0 意味着不收缩
在这里插入图片描述
注释之后：
在这里插入图片描述
flex-shrink:2 意味着收缩的是比其他的容器收缩的2倍
在这里插入图片描述

align-self

示例：

<style>
    .fu{
        display: flex;
        width: 300px;
        height: 300px;
        border: 1px solid #000;
        margin: 50px auto;
        align-items: flex-start;
    }
    .fu div{
        width: 50px;
        border: 1px solid red;
    }
    /* .fu div:first-child{
        border:1px solid blue;
        align-self: flex-end;
    } */
</style>
<body>
    <div class="fu">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</body>

未注释之前：
在这里插入图片描述
注释之后：
在这里插入图片描述

zhongbusi
关注
专栏目录
C语言打印杨辉三角
weixin_51232953的博客
12-12 1201
打印杨辉三角 杨辉三角：是一个无限对称的数字金字塔，从顶部的单个1开始，每行的第一个元素和最后一个元素（肩上只有一个元素）为1，其他元素（肩上都有两个元素）等于肩上两个元素的和。 我们以8层的杨辉三角为例： n=1：1 n=2：1 1 n=3：1 2 1 n=4：1 3 3 1 n=5：1 4 6 4 1 n=6：1 5 10 10 5 1 n=7：1 6 15 20 15 6 1 n=8：1 7 21 35 35 21 7 1 我们可以观察到第i层有i个元素
flex 间距_聊一聊Flex布局
weixin_39844901的博客
11-26 1万+
Flex布局目前对于前端来说已经是一个非常熟悉且常用的布局方案了。有了它，我们很大程度上就可以避免原来让人头秃的正常流布局带来的很多IFC（inline-formatting-context）问题。随着浏览器的支持性不断增强，基本上我们日常的业务开发中95%以上的布局都可以通过Flex轻松解决。但是最近团队面试过程中，我却发现大部分同学对于Flex的理解并没有想象中的那么清晰深入，大部分都只是停留...
关于display:flex的继承
qq_33960741的博客
01-27 2673
设置为display:flex的父元素不会将该属性继承给div子元素，默认div子元素仍然是display:block的，只有再次给子元素设置display:flex，才能继续将子元素设置为flex容器，容纳孙子元素作为容器内的元素，孙子元素才能按照display:flex的布局设置 ...
css中flex属性的介绍
雨名无的博客
11-30 572
flex属性 注意： 如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。 当前元素的父元素的样式为 ​ dispaly:flex flex 语法： flex: 0 0 auto; 含义：不扩展 不收缩 默认长度为内容长度; flex: flex-grow flex-shrink flex-basis。 属性值 值 描述 flex-grow 一个数字，规定项目将相对于其他灵活的项目进行扩展的量。 flex-shrink 一个数字，规定项目将相对于其他灵活
flex布局子元素常用属性
qq_66195472的博客
11-05 848
笔记
flex弹性布局
weixin_49893214的博客
08-06 136
flex-wrap flex-wrap用来控制子项整体单行显示还是换行显示。 取值 含义 nowrap 默认值，表示单行显示，不换行。 wrap 宽度不足换行显示 wrap-reverse 宽度不足换行显示，但是是从下往上开始，也就是原
flex弹性布局(详解)
msq6678的博客
07-21 5699
Flex弹性盒布局前言布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009 年，W3C 提出了一种新的方案—— Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。一、什么是Flex弹性布局？Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的。
flex 弹性布局，最后一行数量不足一行 列表项目左对齐的解决办法
11-19
flex 弹性布局，最后一行数量不足一行 列表项目左对齐的解决办法，经过实际测试，亲自有效，一行的数量可以随意设置。非常有用！
flex弹性布局基本语法（修改版）.pdf
12-01
Flex 弹性布局基本语法 Flex 弹性布局是一种基于盒模型的传统解决方案，依赖于 display 属性 + position 属性 + float 属性。它可以简便、完整、响应式地实现各种页面布局。 开启 Flex 弹性盒子布局可以通过将元素...
flex弹性布局的理解。
06-15
1. 什么是 flex 布局 2. 基本概念 3. 容器的属性 4. 项目的属性1. 什么是 flex 布局 2. 基本概念 3. 容器的属性 4. 项目的属性 帮助理解项目属性 1. order 2. flex-grow 3. flex-shrink 4. flex-basis 5. flex 6. ...
flex 弹性布局
thothsun 的博客
12-12 1003
flex 弹性布局 上一节介绍了小程序中常用的组件，在使用它们的时候，如何控制它们的位置呢？就需要用到布局了。传统的布局实现方式比较麻烦，要用多个属性配合实现。后来 flex 弹性布局出现后，用其他方式实现的布局，用 flex 布局都能更简洁地实现。本节通过几个简单的例子介绍 flex 布局的基本用法。 首先新建一个空白页面，在一个 view 里面放三个 text。在 view 的样式中添加 display:flex 将 view 设置为弹性布局，组件默认是按照从上到下、从左到右的顺序排列。 <!-
flex布局产生的间隙解决方法
热门推荐
小柒的博客
03-11 1万+
flex布局的元素会有默认间隙，解决方法 align-content: flex-start 具体参数如下： 取值情况： flex-start：与交叉轴的起点对齐。 flex-end：与交叉轴的终点对齐。 center：与交叉轴的中点对齐。 stretch（默认值）：轴线占满整个交叉轴。 space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。 space-around：每...
css3中的弹性布局属性flex布局
qwguo
01-05 493
Flex flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。我们可以把任何容器转换成(flex container)成为弹性容器，它的所有子元素就变为(flex item)称为弹性项目成员 我们可以通过给任意容器元素添加 display: flex; 块级弹性容器 和 display:inline-flex;行内块级弹性容器； 注意，设为 Fle...
相机标定源代码（张正友标定法）
09-27
相机标定源代码，给自己的手机摄像头进行标定，采用张正友标定法，包含数据和源代码。
TCP/IP协议：网络通信的基石
09-27
在现代互联网时代，信息的快速、准确传递是至关重要的。TCP/IP协议族作为互联网的基础协议，扮演着连接世界各地计算机和网络设备的核心角色。本文将深入探讨TCP/IP协议的概念、组成、工作原理以及在实际应用中的代码实现。 TCP/IP协议族是现代网络通信的基石，它通过定义一套标准化的通信规则，使得全球范围内的设备能够互联互通。了解TCP/IP协议的工作原理和实际应用，对于构建可靠、高效的网络服务至关重要。随着技术的发展，TCP/IP协议也在不断地演进和优化，以满足日益复杂的网络需求和安全挑战。
基于PHP的江苏大学中非及非洲留学生社区交流网站设计源码
09-27
该项目为江苏大学定制开发的基于PHP的留学生社区交流网站源码，整合了579个文件，涵盖370个PHP脚本、76个GIF图片、31个JavaScript脚本、16个CSS样式文件、16个WOFF字体文件、15个WOFF2字体文件、12个Git忽略文件、9个JPG图片、6个PNG图片、3个JSON配置文件，旨在促进中非及非洲留学生的社区互动与交流。
汽车制造行业工业互联网智能工厂解决方案
最新发布
09-27
汽车制造行业工业互联网智能工厂解决方案 自动运行的物流仓储系统 自动化立体库与RFID标签 搬运的智能化AGV 从需求到供给的价值链整合 库存量最优化 更快的流通速度
excel统计分析案例（1）：列联表分析与卡方检验
09-27
excel统计分析案例（1）：列联表分析与卡方检验
Flex弹性布局详解与用法
"flex弹性布局用法笔记，主要包括display:flex属性开启弹性布局，flex-direction定义主轴方向，flex-wrap控制是否换行，justify-content调整主轴上的对齐方式，align-items处理交叉轴上的对齐，align-content用于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值