Flex布局

2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
采用 Flex 布局，父元素简称"容器"。它的所有子元素自动成为容器成员，简称"项目"。**

div { width: 800px; height: 600px; margin: 100px auto; border: 3px solid purple; display: flex;}
【改变主轴方向】

• 项目按行显示
  flex-direction: row;

• 项目按行倒序显示
  flex-direction: row-reverse;

• 项目按列显示
  flex-direction: column;

• 项目按列倒序显示
  flex-direction: column-reverse;

【设置项目是否换行】
设置项目不换行(默认值)，即n个项目都会在主轴方向显示。
如果项目尺寸之和大于容器主轴的尺寸，则项目自动缩小相应比例 。

• 设置项目换行，超出主轴的宽，则进行换行
  flex-wrap: wrap;

• 设置项目倒序换行
  flex-wrap: wrap-reverse;

• 主轴方向与换行的缩写
  flex-flow: row nowrap;

【项目在主轴方向的对齐方式】
注：当容器主轴的尺寸大于各项目尺寸之和，才需要进行对齐方式的设置。

• 主轴起始位置flex-start对齐
  justify-content: flex-start;

• 主轴结束位置flex-end对齐
  justify-content: flex-end;

• 主轴方向居中center
  justify-content: center;

剩余空间 = 容器的尺寸 - 项目尺寸之和.

• 两端对齐，即第一个项目在容器的起始位置，最后一个项目在容器的结束位置。 每个项目之间的距离，是剩余空间除以（项目个数-1）
  justify-content: space-between;
• 分散对齐中每个项目左右距离的计算公式： (剩余空间 / 项目个数)/2得到的结果，就是每个项目的左右距离。
  justify-content: space-around;
• 每个项目之间的距离相同，即平分剩余空间
  justify-content: space-evenly;

【项目在交叉轴方向的对齐方式(一根主轴)】

注：当容器交叉的尺寸大于各项目尺寸之和，才需要进行对齐方式的设置。

• 交叉轴起始位置flex-start对齐
  align-items: flex-start;

• 交叉轴结束位置flex-end对齐
  align-items: flex-end;

• 交叉轴居中对齐
  align-items: center;

• 交叉轴基线对齐
  align-items: baseline;

【项目在开通换行后，在交叉轴方向的对齐方式(多根主轴)】

注：当容器交叉的尺寸大于各项目尺寸之和，才需要进行对齐方式的设置。

        flex-wrap: wrap;
        align-content: flex-start;        
        align-content: flex-end;        
        align-content: center;

参考文章：A Complete Guide to Flexbox