可能是自己对Flex box的全部理解了。
Background
Flex box,也叫”弹性盒子“,目的是更高效的创建布局、对齐方式、动态处理剩余空间等问题。
在Flex box之前,float和position被广泛的使用在布局里面,但是处理以下三个问题时会非常棘手:
在父容器里垂直居中一个块元素
动态设置子项等量宽度/高度,无论还有多少剩余空间。
多列布局中所有子项高度相同,而不管子项实际内容
对于以上问题,Flex box处理起来可谓是得心应手,而现在各浏览器对于flex box的支持也很好了,点击Can I Use链接查看是否支持,所以,使用flex box会帮助我们更快地解决问题,提升开发效率和可维护性。
当然,flexbox并不是万能的,搭配position使用效果更佳!
Basics and Terminology
容器有两个轴,主轴(main axis)和交叉轴(cross axis),默认主轴是水平方向,交叉轴永远和主轴垂直,正方向是向右或者向下,reverse方向是向左或者向上。
可以随意安排子项,顺序而不用改变文档结构。
对于容器和项,有不同的职责和属性。
flex box是方向无关的,对比HTML元素,div等块级元素默认是垂直排列的,span等内联元素默认是水平排列的
Flex容器属性
- flex-direction: 主轴的排列方向,默认row
1 | .container { |
- flex-wrap: 换行方式,默认nowrap
1 | .container { |
- flex-flow:
flex-direction
和flex-wrap
的简写形式
1 | .container { |
- justify-content: 项目在主轴的排列方式
1 | .container { |
space-around: 每个item等分空间,然后每个item的左右相等,也就是说两个item中间的空间是最左/右侧空间的两倍。
space-between: 两侧item紧挨着边界,中间剩余空间平分。
space-evenly: 剩余空间数量为item的数量+1,均分。
- align-items: 控制交叉轴item的排列
1 | .container { |
- align-content: 定义交叉轴上剩余空间分布
1 | .container { |
注意: 仅当存在多轴线时有效!也就是说 flex-wrap为nowrap的时候,不会产生多线,这个效果也就没用。
Flex项属性
- align-self: 设置单个项和其他项不同排列方式
1 | .item { |
会覆盖align-items
属性。
- order: 在同一容器内重新排列元素顺序,值为整数
1 | .item { |
- flex-grow: 项的放大比例
1 | .item { |
当所有项初始化之后,还有剩余空间时,flex-grow
才会生效;
默认值为0,即即使存在剩余空间,也不会放大;
如果存在剩余空间,容器内所有设置flex-grow
的项根据权重进行分配剩余空间;
如果所有项以flex-basis
排列后,主轴空间不足,并且flex-wrap: nowrap
时,需要配合flex-shrink
使用。
- flex-shrink: 项的缩小比例
1 | .item{ |
缩小方式和放大方式类似。
那么问题来了: 缩小后的值是多少?计算方式是什么?
Stack Overflow链接,能否看懂就看各位的造化了…
我说几句自己的理解:缩小算法和缩小因子因子有关,也和所有的项的flex-basis
的和与父容器width
(或者height
,取决于flex-direction
)的差值大小有关,总之是一个比较复杂的计算方式,对于不能FQ的朋友们,我把原作者的解释代码放在下面👇,供大家参考学习。
算法👇
1 | let sumScaledShrinkFactors = 0, |
公式👇
1 | flexBasis * (1 + shrinkFactor / sumScaledShrinkFactors * remainingFreeSpace) |
例子👇
1 | 1*600px + 1*200px ─┐ width |
- flex-basis: 项初始主轴大小(main size)
1 | .item { |
当flex-basis
设置了值之后,项的width
or height
(取决于主轴方向,主轴方向的值)会失效;
当设置为auto
时,项的width
or height
才会生效。
- flex:
flex-grow
、flex-shrink
和flex-basis
的简写
1 | .item { |
两个快捷值: auto(1 1 auto)
和none(0 0 auto)
;
flex-grow
和flex-shrink
不会同时起作用;
flex项如果flex-grow
、flex-shrink
都设置了,无论flex-wrap
是wrap
还是nowrap
,所有的项就会撑满容器,也就是说,只要有剩余空间,flex-grow
就会起作用,只要空间不足,flex-shrink
就会起作用。
Reference
30分钟学会Flex布局,首发于知乎专栏。
A Complete Guide to Flexbox,英文,作来自css-tricks.com。
MDN - Flexbox,MDN英文,可以选择看中文版。
Bootstrap v4,Bootstrap v4提供了快速使用flex的工具。
Code Repository
示例内容详见GitHub Link。