伸缩盒布局

伸缩盒布局（Flexbox）

CSS3弹性盒（FlexibleBox或flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

• 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
• 容器使用弹性盒布局的父元素display:flex;
• 三列布局(一行中有3列)为了使得article分列显示，只需要为article元素的父元素section进行如下设置.section{display:flex;}修饰后，三列在一行中显示，高度相等，宽度动态调整，当调整浏览器宽度的时候，每一列的宽度会动态调整
• 三行布局默认情况下，主轴是X轴（mainaxis），即flex容器中的各个元素在一行中分多列显示。如果想在一列中显示多行，我们可以将主轴改为Y轴。
• flex-direction:row（列布局）flex-direction:column（行布局）

justify-content 控制伸缩盒子在主轴上的对齐方式 取值：

flex-start	默认值。项目位于容器的开头。
flex-end	项目位于容器的结尾。
center	项目位于容器的中心。
space-between	填充空白自适应在主轴中心显示，但是首尾两个元素距离容器没有空白。
space-around	填充空白自适应在主轴中心显示，项目位于各行之前、之间、之后都留有空白的容器内。

align-items 控制伸缩盒子在交叉轴的对齐方式 取值：

stretch	默认值。元素被拉伸以适应容器。 如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。将盒子在交叉轴上进行拉伸，直至适应整个伸缩盒子容器
center	元素位于容器的中心。 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
flex-start	元素位于容器的开头。 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end	元素位于容器的结尾。 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
baseline	元素位于容器的基线上。 如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。

align-content 多轴排列在交叉轴对齐方式 取值

取值：flex-start、flex-end、center、stretch【默认】、space-around、space-between

列布局（主轴是x轴，交叉轴是y轴）放在一行中

flex-direction: row;默认值，一行内去放，结果：列布局 

flex-wrap: nowrap;默认值，不换行，进行伸缩 

flex-wrap: wrap;自动换行

 flex-wrap: wrap-reverse;自动换行，并且颠倒顺序:倒序输出

行布局 放在一列中

flex-direction: column;放在一列中，结果：行布局

对flex指定所占的份数，子元素相对于父元素所占的比例，flex：1；

flex：2 200px;在200px的基础上加上份数比例，两份。

flex-grow	一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
flex-shrink	一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
flex-basis	项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。