flex布局

最新推荐文章于 2024-07-25 16:17:30 发布

练习时长1月半的前端练习生

最新推荐文章于 2024-07-25 16:17:30 发布

阅读量661

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/cxync/article/details/119616913

flex结构
flex-container属性：

1，flex-direction改变主轴的方向，更改flex-item的排列方式
属性值如下：
默认值row 从左到右，row-reverse从右往左，column从上到下，column-reverse从下到上

2，justify-content改变flex-item在主轴上的对齐方式
改变对齐方向，在默认情况下flex-item是从左往右对齐的，当我们希望从右往左对齐的时候就需要用到justify-content，使用flex-container固然可以实现从右向左对齐，但是改变主轴的顺序意味着在改变对齐的同时也破坏了flex-item原有的结构顺序
属性值如下
默认值flex-start，在main start（默认主轴的起始点，靠左）对齐
flex-end，在main end对齐（默认主轴的终点，靠右）对齐
center，中心对齐，

应该是默认主轴的中心，等下试一下主轴改成column这个会不会变
space-between，在主轴上，两边的flex-item紧靠着边缘，中间的部分进行等分
space-evenly，flex-item在主轴上平分空间，且彼此有大小相同的间隙
space-around，flex-item在左右边缘的间隙小，中间的flex-item间隙大（为左右间隙的两倍）

3，align-items
需要测试，
align-items决定了flex-items在交叉轴（默认纵轴）上的对齐方式
属性值
默认值normal，效果与下面的stretch相同

stretch，当flex item在cross axis方向的size为auto的时候，会自动拉伸至填充flex container（也就是说，当我们不给flex-item设置高度，让flex-item的高度由其内容进行决定的时候，flex布局下默认值（normal，stretch）都会将flex-item的高度拉伸至与cross axis的高度（cross size）相同）

上面两种都是在flex-item没有设置高度下的情况，没设置高度的情况下会占满整个cross axis的高，所以讨论交叉轴的对齐方式没有意义
在flex-item设置了高度的情况下：
flex-start，在开始位置对齐（cross-start→cross-end）
flex-end，在结束位置对齐，（cross-end→cross-start），交叉轴的底部对齐，flex-item只有一行的情况下，会把所有交叉轴都交给flex-item，存在多行的时候（待测试）
center，交叉轴的中心对齐
baseline，基线对齐，以第一行文本作为基线进行对齐

4，flex-wrap
flex布局中，默认情况下，当flex-item宽度的总和大于主轴的大小的时候，flex布局会对其中的每一个flex-item宽度大小做压缩处理，是所有flex-item平均分配主轴的空间（收缩，在同一行显示）
上述现象的出现是因为
flex-wrap的默认值no-wrap，不换行显示
wrap，换行显示，并且不同行的flex-item会对整个flex-container的空间进行平分（导致间隙）
warp-reverse，用的很少，在cross axis上做反转，重新排布flex-item

5，flex-flow
缩写属性，顺序任意
flex-direction和flex-wrap的简写

6，align-content
决定多行flex-item在cross axis上的对齐方式
属性值：
stretch（默认值），flex-item没高度的情况下对其进行拉伸，和align-item的stretch类似
flex-start，与cross start（交叉轴顶部）对齐，依次进行排布，这个属性就可以解决之前flex-wrap:wrap导致的换行后因为多行flex-items平分flex-container而产生的间隙问题，
flex-end，与cross end（交叉轴底部）对齐，依次进行排布，flex-item占满一行以后，会往下垫出来一行，依次进行排布
center，居中对齐，在交叉轴上居中对齐
space-between，flex-item紧贴着cross start，cross end边缘
space-evenly，flex-item之间距离相等，flex-item与cross start，cross end之间的距离等于flex item之间的距离的一半
space-around，flex-item之间距离相等，flex-item与cross start，cross end之间的距离等于flex item之间的距离

flex-item的属性

order 决定flex-item排布顺序，这个属性是给item设置的，给每个flex-item设置order值（可以设置任意整数，正整数，负整数，0，默认值为0），flex-container会根据每个flex-item的order值大小重新对展示顺序进行排列

align-self

flex-item可以通过align-self覆盖flex-container设置的align-items（交叉轴对齐方式），搞特殊呗意思是
flex-container上设置某个align-items规则时（如center），则所有flex-item都应该遵循其父元素的对齐规则，如果某个flex-item想摇不遵循该规则的时候，就给这个flex-item单独设置align-self，以及自己想遵循的独立的对齐规则

flex-grow

拉伸原有的flex-item宽度，flex-grow决定了flex-item如何拓展
可以设置任意非负数字，正小数，正整数，0
当flex container在main axis方向上有剩余size的时候，flex-grow才会生效

当所有flex item的flex-grow总和sum超过1的时候，每个flex-item拓展的尺寸为： flex container的剩余size*flex-grow/sum

举个例子，三个width为100px的flex-item按照默认排布在width为500px的flex-container内，这时候剩余空间为200px，如果想要拉伸这三个flex-item至占满整个flex-container，则每个flex-item需要增加66.7px的width，给每个flex-item都设置flex-grow:1，则总和sum为3这个时候拓展尺寸的计算公式就为
200px*1/3，这样每个设置flew-grow的flex-item最终就会分得66.7px的拓展宽度
（简单的理解就是当flex-container存在剩余的时候，通过flex-item上设置flex-grow值的大小，换算为比率进行内容的重新分配）

当所有flex item的flex-grow总和sum不超过1的时候，每个flex-item拓展的尺寸为： flex container的剩余size*flex-grow

flex items拓展后的最终size不能超过max-width\max-height

flex-shrink

当flex-items的总宽度大于flex-container的时候就会进行收缩
默认情况下就是收缩的，因为flex-shrink默认值为1，该属性可以设置任意非负数字（0，正小数，正整数）

如果所有flex-items的flex-shrink总和超过了1，每个flex item收缩的size为：
flex items超出flex container的size*收缩比例/所有flex items的收缩比例之和

如果所有flex-items的flex-shrink总和不超过1，每个flex item收缩的size为：
flex items超出flex container的sizesum收缩比例/所有flex items的收缩比例之和
收缩比例=flex-shrink*flex item的base size
base size就是flex item放入flex container之前的size