flex布局

弹性容器属性：

1.flex-direction：指定弹性元素的排列方向

• row 默认横向从左到右
• row-reverse 横向从右到左
• column 从上到下
• column-reverse 从下到上

2.flex-wrap：弹性元素是否自动换行

• nowrap 默认不换
• wrap 换行
• wrap-reverse 逆辅轴反向换行

 body {
      display: flex;
      flex-wrap:wrap-reverse
}

 flex-flow:wrap和direction的混合简写，无顺序要求

3.justify-content：如何分配主轴上的空白空间

• flex-start：元素沿着起点排列，空白在末端
• flex-start：元素沿着终点排列，空白在起点
• center：居中排列，空白在两端
• space-around:空白均匀分布在元素两侧
• space-evenly：空白均匀分布在元素单侧
• space-between：空白分布在元素之间，两边没有 

4.align-items：元素在辅轴上如何对齐

• stretch：默认所有元素长度拉伸为相同值（自己写发现和flex-start效果一样...）
• flex-start:元素不拉伸，沿着辅轴起边对齐
• flex-end:元素不拉伸，沿着辅轴终边对齐
• center:元素不拉伸，居中对齐
• 

5. align-content：辅轴空白空间的分布，其值和使用方法和justify-content一样。使用有三个前提：设置父元素display:flex、flex-direction:、flex-wrap。以下是align-content：center的显示

弹性元素属性： 

1.flex-grow：指定弹性元素的伸展系数。当父元素有多余空间时，子元素如何伸展。会按照所有子元素的flex-grow的比例分配

2.flex-shrink：指定弹性元素的收缩系数。当父元素容不下子元素时，子元素如何收缩。元素的basis长度和shrink的乘积决定了元素的收缩比例

3.align-self：用来覆盖父元素的align-items

4.flex-basis：在分配剩余空间时，元素所占主轴空间的长度。如果是auto，就是元素本身长度。如果设置了值，不管元素本身长度如何，都给它以这个长度计算。

剩余的空间 = 总的width - c1.width - c2.width - c3.width 

.c1 {
      background-color: green;
      flex: 1 1 10px;
}
.c2 {
      background-color: red;
      flex: 1 1 10px;
}
.c3 {
      background-color: wheat;
      flex: 1 1 10px;
}

/*从下图可以看到因为元素基础长度都是10，剩余的空间因为三者都设置了grow是1，所以三者宽度相等*/

.c1 {
      background-color: green;
      flex: 1 1 auto;
}
.c2 {
      background-color: red;
      flex: 1 1 auto;
}
.c3 {
      background-color: wheat;
      flex: 1 1 auto;
}
/*从下图中看到，元素基础元素auto，即黑色划线部分，剩余的空间因为grow都设了1，所以等比分配*/

5.order：弹性元素的顺序，还能改变渲染顺序 

flex：1 的含义：flex：1 1 0

flex:1 表达的含义 - 简书