flex弹性布局知识点详解

最新推荐文章于 2024-09-05 10:31:00 发布

今天会下雨吗

最新推荐文章于 2024-09-05 10:31:00 发布

阅读量294

点赞数

分类专栏： CSS 文章标签： flex css3

本文链接：https://blog.csdn.net/weixin_45663697/article/details/105917924

版权

CSS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

01_1flex-direction

flex-direction用来控制子项整体布局方向，是从左往右还从右往左，是从上往下还是从下往上

取值	含义
row	默认值，显示为行。方向为当前文档水平流方向，默认情况下是从左往右
row-reverse	显示为行。但方向和row属性值方向相反
column	显示为列
column-reverse	显示为列。但方向和column属性值是反的

01_2 flex布局特性

当输入的内容宽度大于设定区域的宽度时，会自动平均分配，改变内容宽度大小；但是当内容过多超过可分配宽度，则内容会溢出

01_3 flex-wrap

flex-wrap用来控制子项整体单行显示还是换行显示

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

01_4flex-flow

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

01_5 justify-content

justify-content属性决定了主轴方向上子项的对齐和分布方式

取值	含义
flex-start	默认值，表现为起始位置对齐
flex-end	表现为结束位置对齐
center	表现为居中对齐
space-between	表现为两端对齐，between是中间的意思，意思是多余的空白间距只在元素中间区域分配
space-around	around是环绕的意思，意思是每个flex子项两侧都环绕互不相干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半
space-evenly	evenly是匀称、平等的意思。也就是视觉上，每个flex子项两侧空白间距完全相等

01_6align-items

align-items中的items指的就是flex子项们，因此align-items指的就是flex子项们相对于flex容器在侧轴方向上的对齐方式。
align-items是针对一行子项的对齐方式
为了方便观察源代码添加了justify-content: space-evenly;

取值	含义
stretch	默认值，flex子项拉伸
flex-start	表现为容器顶部对齐
flex-end	表现为容器底部对齐
center	表现为垂直居中对齐

01_7align-content

align-content可以看成和justify-content是相似且对立的属性，如果所有flex子项只有一行，则align-content属性是没有任何效果的。
align-content是多行子元素的对齐方式

取值	含义
stretch	默认值，每一行flex子元素都等比拉伸。例如：如果共两行flex子元素，则每一行拉伸高度是50%。
flex-start	表现为起始位置对齐
flex-end	表现为结束位置对齐
center	表现为居中对齐
space-between	表示为两端对齐
space-around	每一行元素上下都享有独立不重叠的空白空间
space-evenly	每一行元素都完全上下等分

01_8总结

01_1–01_7是添加在父元素的css样式
因为justify-content、align-items、flex-wrap是针对单行子项的对齐方式，所有折行时上下两行会出现空白间隔，结合align-content使用后可消除。
css

<style>
    #box{
        width: 300px;
        height: 300px;
        border: 1px black solid;
        margin: 20px auto;
        display: flex;
        justify-content: space-evenly;
        align-items: flex-start;
        align-content: flex-start;
        flex-wrap: wrap;
    }
    #box div{
        width: 50px;
        color:white;
        background: red;
    }
    </style>

html

<body>
    <div id="box">
        <div>测试文本</div>
        <div>测试文本测试文本</div>
        <div>测试文本测试文本测试文本</div>
        <div>测试文本</div>
        <div>测试文本测试文本</div>
        <div>测试文本</div>
        <div>测试文本测试文本</div>
        <div>测试文本测试文本测试文本</div>
        <div>测试文本</div>
        <div>测试文本测试文本</div>
    </div>
</body>

没加
添加后

02_1作用在flex子项上的css属性

示例：

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

给第一个子项设置order：1;
flex-grow
- 给第一个子项添加flex-grow: 1;。当设置的值">=1"时第一个子项会把本来在右边的空白区域占满
- 值为0.5时就占一半
- 每个子项都设置：flex-grow: 0.25;，则每个子项平分空白区域
flex-shrink
当空间不足时默认收缩，（下图是没有给子项添加flex-shrink的）
- 给第一项添加flex-shrink: 0;，不收缩
- 给第一项添加flex-shrink: 2;，数值越大收缩越明显
flex-basis
- 给子项设置flex-basis: 30px;就相当于设置了width: 30px;
- 当子项同时设置了flex-basis: 150px; width: 100px;，width的优先级低于flex-basis的，此时显示的宽度是150px
- 当父容器宽度不足，flex-basis值过大时，flex-basis的优先级小于父容器宽度
flex-grow、flex-basis、flex-shrink的混合写法
- flex: 0 1 auto;(默认值），分别对应flex-grow、flex-shrink、flex-basis
- 优先级
  - 当给子项单独添加flex-grow: 0;，且子项设置了宽度时，flex-grow优先级低不起作用
  - 给子项单独添加flex: 0;,且子项设置了宽度时，flex优先级高起作用
  - 当时flex-grow/flex设置的值大于0时，flex-grow/flex优先级都比宽度高