FFC详解及应用
要使用 flexbox 布局,只需在父 HTML 元素上设置 display 属性
display: flex;
或者你可以以内联样式的显示
display: inline-flex;
当在父容器上设置了display: flex;或者display: inline-flex;后,它的子元素都自动变成flex项
采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。
针对flex容器可以设置
针对flex项目
flex-basis
flex-basis: number|auto|initial|inherit;
number: 一个长度单位或者一个百分比,规定灵活项目的初始长度。
auto: 默认值。长度等于灵活项目的长度。如果该项目未指定长度,则长度将根据内容决定。
flex-shrink计算公式
box-shrink:(每个盒子的宽度 x box-shrink所占比例) ÷ (每个盒子的宽度 x box-shrink所占比列 相加 之和 ) × 多出来的剩余空间
例如:
flex: 0 2 300px;
flex: 0 1 200px;
flex: 0 2 100px;
那我们知道子元素需要的空间是 300+200+100 一共 600px,假设父元素只有 400px
所以分别的负空间是 200px,或者说需要缩小 200px。三个元素 flex-shrink 分别为 2 1 2,表面上看应该分别缩小 80 40 80,那三个元素应该 220 160 20。但事实是这样吗?
如果你也尝试一下,就会知道,实际上的效果是 180 160 60。
我们来看一下正确的计算方式:
总权重TW = 每个div的宽度乘以flex-shrink系数的总和。flex-shrink * 盒子的宽度
2 * 300 => 600
1 * 200 => 200
2 * 100 => 200
每个div收缩的空间为:(div的宽度 * flex-shrink系数)/ 总权重TW * (需要收缩的宽度)
所以三个元素真正的系数分别是 600/1000 200/1000 200/1000,200 的缩小总额得出需缩小 120 40 40。可以看到和实际情况相符。
小技巧
- 在flex布局中,
margin: auto
会吃掉每个方向上的剩余的空间,所以设置合适的margin
可以达到一些特殊的效果,比如,给最后一个flex item设置flex-grow: 1
会让它占用主轴上剩余的空间,配合text-align: right
可以实现文字靠在最右侧的效果,但是使用margin-left: auto
能更简单地实现上述效果。 -