2019-09-03 布局之flex

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填充满空间）

• align-content

类似于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