弹性盒子笔记

弹性盒子是CSS3的一种新布局模式
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器（弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行）

flex-direction 指定弹性容器中子元素排列方式
row 正着一横行
row-reverse 反正一横行
column 正着一竖行
column-revers 反着一竖行

flex-wrap 设置弹性盒子的子元素超出父容器时是否换行
wrap 换行，第一行在上方
wrap-reverse 换行，第一行在下方。
nowrap (默认)：不换行

flex-flow
flex-direction 和 flex-wrap 的简写

align-items 设置弹性盒子元素在侧轴（竖轴）方向上的对齐方式
flex-start 项目位于容器的开头。
center 项目位于容器的中心。
flex-end 项目位于容器的结尾
baseline 项目位于容器的基线上。

align-content 修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐
stretch - 默认。各行将会伸展以占用剩余的空间。
flex-start 各行向弹性盒容器的起始位置堆叠。
flex-end 各行向弹性盒容器的结束位置堆叠。
center 各行向弹性盒容器的中间位置堆叠。
space-between 各行在弹性盒容器中平均分布。
space-around 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

justify-content 设置弹性盒子元素在主轴（横轴）方向上的对齐方式
flex-start 默认值。项目位于容器的开头。
flex-end 项目位于容器的结尾
center 项目位于容器的中心。
space-between 项目位于各行之间留有空白的容器内。
space-around 项目位于各行之前、之间、之后都留有空白的容器内。