弹性盒子布局
概念
1.display
display用于指定弹性盒的容器，其值可以为flex;如果为行内元素，值为inline-flex;
2.flex-flow
flex-flow是属性flex-direction和flex-wrap的简写，用于排列弹性子元素。
flex-direction的取值
row：弹性盒子元素按横轴方向顺序排列，默认值。
row-reverse：弹性盒子元素按横轴方向逆序排列。
column：弹性盒子元素按纵轴方向顺序排列。
column-reverse：弹性盒子元素按纵轴方向逆序排列。
flex-wrap的取值
nowrap flex容器为单行，该情况下flex子项可能溢出容器。
wrap flex容器为多行，flex子项溢出部分可能会被放置到新行。
wrap-reverse 反转wrap排列。
3.justify-content
justify-content属性能设置子元素在当前轴方向的排列。
justify-content的取值
flex-start：弹性盒子元素将向行起始位置对齐。
flex-end：弹性盒子元素将向行结束位置对齐。
center：弹性盒子元素将向行中间位置对齐。
space-between：弹性盒子元素将会平均分布在行里，第一个元素的边界与行的起始位置边界对齐，最后一个元素的边界与行结束位置的边距对齐。
space-around：弹性盒子子元素会平均的分布在行里，两端保留子元素与子元素之间间距大小的一半。
4.align-items
align-items属性用于设置子元素在垂直于轴的方向上的排列。
align-items的取值
flex-start：弹性盒子元素向垂直于轴的方向上的起始位置对齐。
flex-end：弹性盒子元素向垂直于轴的方向上的结束位置对齐。
center：弹性盒子元素向垂直于轴的方向上的中间位置对齐。
baseline：如果弹性盒子元素的行内轴与侧轴为同一条，则该值与flex-start等效。其他情况下，该值将参与基线对齐。
strech：如果指定侧轴的大小属性为auto，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照min/max-width/height属性的限制。
5.order
order属性用于设置子元素的出场顺序。
6.flex
flex是flex-grow（扩展比率）、flex-shrink（收缩比率）和flex-basis（宽度、像素值）的缩写，能设置盒子的伸缩性。
7.flex-self
align-self属性能够覆盖容器中的align-items属性。用于设置单独的子元素如何延纵轴排列。属性与align-items一致。
笔记部分
flex布局原理
flex是flexible Box的缩写，意为”弹性布局“，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局
- 当我们为父盒子设置为flex布局以后，子元素的float、clear和vertical-align属性将失效
- 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局
rem布局
rem
