CSS3 弹性盒子(Flex Box)
一、概念与定义
1.弹性盒子是CSS3引入的一种新的布局模式——Flexbox。
2.Flexbox布局叫做弹性盒布局或者伸缩布局盒模型。
3.CSS3 弹性盒（ Flexible Box 或 Flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
4.Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
5.任何一个容器都可以指定为Flex布局
.box{
display: flex;}
行内元素也可以使用Flex布局。
.box{
display: inline-flex;}
注意：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
[if !supportLists]6. [endif]Flexbox 作用：让容器（父元素）有能力控制子项目（子元素）。
[if !supportLists]7. [endif]采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
[if !supportLists]8. [endif]容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）（也叫侧轴）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴（侧轴）的开始位置叫做cross start，结束位置叫做cross end。
注意：项目默认沿主轴排列。
二、弹性盒相关属性
1.弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
2.弹性容器通过设置display 属性的值为 flex 将其定义为弹性容器。
3.弹性容器内包含了一个或多个弹性子元素。
注意：弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
4.弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
display:flex;
属性1：flex-direction
flex-direction：创建主轴，定义伸缩项目在伸缩容器中的方向。
语法
flex-direction: row | row-reverse | column | column-reverse
flex-direction的值有:
row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
属性2：justify-content
justify-content：应用在弹性容器上，用来定义伸缩项目沿主轴现的对齐方式。
语法
justify-content: flex-start | flex-end | center | space-between | space-around
justify-content的值有:
flex-start：弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start 外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。
flex-end：弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在 该行的main-end边线，而后续弹性项依次平齐摆放。
center：弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个 方向上同时溢出）。
space-between：弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项， 则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边 线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性 项分布在该行上，相邻项目的间隔相等。
space-around：弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为 负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且 彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间
（1/2*20px=10px）。
属性3：align-items
align-items设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
语法
align-items: flex-start | flex-end | center | baseline | stretch
align-items的值有:
flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边 界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒 子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它 情况下，该值将参与基线对齐。
stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能 接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
属性3：flex-wrap
flex-wrap :用于指定弹性盒子的子元素换行方式。
语法
flex-wrap: ||
flex-wrap的值有:
nowrap ：默认，弹性容器为单行。该情况下弹性子项可能会溢出容器。
wrap ：弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断 行
wrap-reverse：反转wrap排列，方向与wrap相反。
属性4：align-content
align-content :堆栈伸缩行。用于修改flex-wrap属性的行为，设置各个行的对齐。
语法
align-content: flex-start | flex-end | center | space-between | space-around | stretch
align-content的值有:
stretch :默认。各行将会伸展以占用剩余的空间。
flex-start :各行向弹性盒容器的起始位置堆叠。
flex-end:各行向弹性盒容器的结束位置堆叠。
center :各行向弹性盒容器的中间位置堆叠。
space-between :各行在弹性盒容器中平均分布。
space-around :各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。
三、弹性子元素属性
属性1：排序order
order :加在子元素上，默认状态按标准流的顺序排列，在flexbox里可通过order：数值改变伸缩项 目的顺序。
语法
order:
order：1——用整数值来定义排列顺序，数值小的排在前面。可以为负值。
属性2：align-self
align-self：用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。可覆盖align-items的值。
语法
align-self: auto | flex-start | flex-end | center | baseline | stretch
