flex属性用来设置 flex容器内的 flex item 怎样缩放以适应 flex 容器所提供的空间。
flex属性是 flex-grow, flex-shrink, and flex-basis属性的简写。
创建 flex 容器：把一个容器的 display 属性值改为 flex 或者 inline-flex。容器中的直系子元素就会变为 flex 元素。
容器上的属性
flex-direction
用来控制容器内的 item 的排列方向，从哪开始，如何排列。
| 取值 | 含义 |
|---|---|
| row： | 从左往右排列（默认值） |
| row-reverse： | 从右往左 |
| column： | 从上往下 |
| column-reverse： | 从下往上 |
flex-wrap
用来控制容器内的 item 是否换行，
| 取值 | 含义 |
|---|---|
| nowrap | 默认值。单行排列。 |
| wrap | 自动换行 |
| wrap-reverse | 自动换行后改变行的上下排列的顺序 |
| initial | 设置该属性为它的默认值。 |
| inherit | 从父元素继承该属性。 |
flex-flow
flex-flow是flex-direction属性和flex-wrap属性的简写
-
justify-content
一行内元素如何左右排列
| 取值 | 含义 |
|---|---|
| flex-start | 左对齐 |
| flex-end | 右对齐 |
| center | 居中对齐 |
| space-between | 左右靠边对齐后，中间间距均分 |
| space-around | 均匀分布，空白间隙距离相同，左右两边视为一个空隙，所以分别看的话只有其它间隙的一半长 |
| 其它属性 | 浏览器未实现，未测试 |
-
align-items
一行内的元素如何在垂直方向上对齐
| 取值 | 含义 |
|---|---|
| flex-start | 顶部对齐 |
| flex-end | 底部对齐 |
| center | 居中对齐 |
| baseline | 基线对齐（当填入文字时，文字在基线上方，文字以基线为底） |
| stretch | 拉升对齐（所有item填充满空间） |
类似于justify-content，不过align-content 是决定行与行之间如何垂直方向上排列，可以把一行视为一个item。
| 取值 | 含义 |
|---|---|
| flex-start | 上对齐 |
| flex-end | 底部对齐 |
| center | 所有行往中间挤 |
| space-between | 两边对齐 |
| space-around | 把两边视为一个间隙，间隙均分对齐 |
| stretch | 拉伸充满对齐 |
tips: align 和 justify 都有使对齐的含义，但 align 主要让元素如何在上下方向移动， justify 主要让元素在左右方向移动。
容器内item的属性
参考：
[1]写给自己看的display: flex布局教程 张鑫旭
[2]Flex 布局教程：语法篇 阮一峰
[参考]MDN
a-guide-to-flexbox
网友评论