flex

flex

前端布局神器：flex，当然也没有那么神奇了，每个属性都是有灵魂的。

---

---

语法篇

flex规定了弹性布局下，如何规划容器内的空间。其实 flex 类似 background 是简写属性，融合了其他三个属性：flex-grow、 flex-shrink、 flex-basis 。

什么是弹性布局？弹性布局就是将容器设置为 display: flex ???。

值长度	flex-grow	flex-shrink	flex-basis
默认值	0	1	auto
1	无单位数字（number）	-	-
1	宽度值带单位（width）	-	-
1	none	-	-
1	auto	-	-
1	initial	-	-
2	无单位数字（number）	无单位数字（number）	-
2	无单位数字（number）	宽度值带单位（width）	-
3	无单位数字（number）	无单位数字（number）	宽度值带单位（width）

取值

none

可以理解为既不放大也不缩小，就是’固执’

auto

可以理解为大小都行，就是 ‘百搭’、‘自适应’。 效果等同于： flex: 1 1 auto

initial

可以理解为小于等于自身宽高，可以缩小，也就是 ‘不贪又谦让’。效果等同于： flex: 0 0 auto

flex-grow

在codepen打开
默认值为 0，负值无效。
这个值决定了占比，具体由数字大小确定。

flex-shrink

在codepen打开
默认值为1，负值无效。当值为0时不缩放。
flex 元素仅在默认宽度之和大于容器的时候才会发生收缩。
flex-shrink 数字越大缩放程度越高

flex-basis

在codepen打开
若值为0，则必须加上单位，以免被视作伸缩性。 默认值为 auto。
定义了项目占据的空间，主轴方向上的初始大小。

引用链接

[1] 阮一峰. Flex 布局教程：语法篇
[2] 阮一峰. Flex 布局教程：实例篇
[3] MDN. flex - CSS(层叠样式表)