css3弹性盒子（flex布局）

概念

• 弹性盒子，是css3新增的一种布局方式，可以用更有效的方法使弹性容器的内的子元素按 照特定的方式进行排列和对齐以及空间的分配。

定义一个弹性盒子

• 弹性盒子的组成：
    弹性容器、弹性子元素
  弹性容器内包含了一个或多个弹性子元素。
• display：flex | inline-flex（使容器宽由内容撑开）
• flex弹性布局
    flex布局，可以简便、完整、响应式的实现各种页面。而且它得到了所有浏览器的支持
  注意：
    1. 弹性容器外及其子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性盒内布局
    2. 采用flex布局的元素称为flex容器，其子元素自动成为容器成员，称为flex项目
    3. 容器中默认存在两根轴，主轴和交叉轴
    4. 默认是主轴排列

属性

写在容器上（容器属性）

1. flex-direction：定义内部的排列方向（确定主轴）
   值：
    (1)row：默认，水平方向，从左到右
    (2)row-reverse：水平方向，从右到左
    (3)column：显示为列，垂直方向（从上到下）
    (4)column-reverse：显示为列，垂直方向（从下到上）
2. justify-content：定义子元素在主轴上的对齐方式。
   值：
    (1)flex-start：起始位置对齐（默认）
    (2)flex-end：结束位置对齐（主轴最后对齐）
    (3)center：表现为居中对齐
    (4)space-between：表现为两端对齐（中间剩余空间等分给每一个元素）
    (4)space-around：每个子项目两侧间隔相等。
    (5)space-evenly：均匀，平等对齐，每个子项两侧空白间距相等
3. align-items：定义子元素在交叉轴（侧轴）方向上的对齐方式。
   值：
    (1)stretch：默认，在子元素不设置高度的情况下，默认子元素高度和容器相等
    (2)flex-start：容器顶部对齐
    (3)flex-end：容器底部对齐
    (4)center：垂直居中对齐
    (5)baseline：基线对齐
4. flex-wrap：定义子元素整体单行显示还是换行显示。
   值：
    (1)nowrap：不换行（默认），一行放不下自动缩小子元素
    (2)wrap：宽度不足换行显示。第二行在第一行下面
    (3)wrap-reverse：宽度不足换行显示，第二行在第一行上面

写在子项上（项目属性）

1. order属性：定义项目的排序，order值越大排列越靠后，默认值为0
2. flex-grow属性：定义项目的放大比例，默认为0，即若存在剩余空间，也不放大
     可选值：number
   注意：
   （1）默认值0,有剩余空间不分配
   （2）如果元素的值都是1，剩余的大小平均分配给每一个元素
   （3）如果都是1其实有一个值是2，值是2的元素所分配的空间是其它的2倍
3. flex-shrink属性：定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
    可选值：number
   注意：如果项目flex-shrink都为1，空间不足时，等比例缩小。如果一个为0，其余为1，空间不足时，前者不缩小，负值对改属性无效
4. align-self：某一个子元素交叉轴的对齐方式,和align-item属性作用相同
   值：
    (1)flex-start：容器顶部对齐
    (2)flex-end：容器底部对齐
    (3)center：垂直居中对齐
    (4)baseline：基线对齐
    (5)stretch：默认
5. flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
   一般使用flex:1; 设置子元素平分容器的大小
   flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
   默认值：0 1 auto
   flex-basis: 设置弹性盒子的初始大小