flex弹性盒模型布局

一、说明
传统基于盒子模型，运用浮动、定位进行布局，但对于那些特殊布局非常不方便。
2009，css3新推出了 flex 弹性盒模型布局，可以简便、完整、响应式地实现各种页面布局。
二、基本概念

• flex至少要有两层元素，有父级和子级。父级，采用flex布局的元素，称为“容器，内部提供给子级（项目）进行排列；子级，父级的所有子元素自动成为容器成员，称为“项目”。
• 容器默认存在两根轴，水平方向的主轴（main axis）；垂直方向的交叉轴（cross axis）。两轴永远垂直
• 主轴的开始位置（与边框的交叉点）叫做 main start，结束位置叫 main end；交叉轴开始位置叫 cross start，结束位置叫 cross end
• 单个项目占据主轴的空间叫 main size，占据的交叉轴空间叫 cross size
• 容器display:flex;，项目（子元素）默认沿主轴上排列、不换行（项目总宽度小于容器宽度，正常排列；项目总宽度超过容器宽度，项目本身宽度失效，均分容器宽度——这在传统布局不好实现均分）

三、flex容器的属性

1、主轴方向 flex-direction

• row，默认值，主轴为水平方向，起点在左端（项目水平方向排列）
• row-reverse，主轴为水平方向，起点在右端
• column，主轴为垂直方向，起点在上沿（项目竖直方向排列）。注意：如果项目设置了行高line-height，会强制撑开高度，而不会自动根据容器高度进行均分
• column-reverse，主轴为垂直方向，起点在下沿

2、主轴上的对齐方式 justify-content （以主轴方向为默认值为例）

• flex-start，默认值，左对齐，（实际：与主轴的起点处对齐）
• flex-end，右对齐，（实际：与主轴的终点对齐）
• center，居中，即全部项目挤在一起在主轴上居中（这样就不用像原来一样全部子元素外面再包一层然后进行居中）
• space-around，每个项目两侧间隔相等（即会形成项目之间的间隔 比 项目与边框的间隔大一倍）
• space-between，两端对齐，项目之间的间隔相等

3、交叉轴上的对齐方式 align-items

• flex-start，交叉轴的起点对齐
• flex-end，交叉轴的终点对齐（可以做柱状图）
• center，交叉轴的中心对齐
• baseline，项目的第一行文字的基线对齐
• stretch，默认值，项目未设置高度或者设为auto，将占满整个容器的高度

• nowrap，默认值，不换行。即如果项目总宽度大于容器宽度，则项目会均分容器宽度进行排列（主轴方向为水平）

• wrap，换行，多余的换行到（主轴）下面；主轴竖直方向则换行到右边（发现：如果交叉轴方向项目总高度小于容器高度，还会均分剩余高度加个margin-bottom一样的东西）

  
  

• wrap-reverse，换行，多余的换行到（主轴）上面；主轴竖直方向则换行到左边

  
  

5、多轴线的对齐方式 align-content
在换行状态下（即会有多跟轴线），每一行元素在交叉轴上的对齐方式。默认情况下即均匀的排列（和上面所说的均分剩余高度加个margin-bottom...一样的东西）

• flex-start，与交叉轴的起点对齐
• flex-end，与交叉轴的终点对齐
• center，与交叉轴的中点对齐
• space-between，与交叉轴两端对齐，轴线间的间隔平均分布
• space-around，每根轴线两侧的间距都相等（即会形成轴线间的间隔 比 轴线与边框的间隔大一倍）
• strech，默认值，轴线占满整个交叉轴

四、flex项目的属性（不常用）
1、项目排列顺序 order
用于定义项目的排列顺序，数值越小，排列越靠前，默认是order:0;
2、项目放大比例 flex-grow
定义项目的放大比例。默认为0，不放大；都为1，则等分剩下的空间（如果有的话）；不同的数值，即按比例分配剩下的空间。
3、项目缩小比例flex-shrink
默认1，当空间不足时，都将等比例缩小。0不缩小。
4、flex-basis
定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
5、组合属性 flex

• flex-grow, flex-shrink 和 flex-basis的简写，默认值为flex:0 1 auto;。
• 该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
  建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
• 后两个属性可选。如果只用一个值，则定义的是各个项目所占比例。第二块设为flex:2;，其他默认1。
  

6、align-self
允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}