Flex布局

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

1. 网页布局

传统网页布局基于盒状模型，通过display+position+float三个属性实现，它不容易实现比如垂直居中等。

Flex 布局可以简便、完整、响应式地实现各种页面布局。

2. Flex布局基本概念

• flex container：flex容器，采用flex布局的元素；
• flex item：flex项目，flex容器中的所有子元素都可以成为flex item；

3. 容器的属性

• flex-direction：决定主轴的方向，选项有row, row-reverse, column, column-reverse；
• flex-wrap: 定义换行方式，选项有nowrap, wrap, wrap-reverse；
• flex-flow：flex-direction和flex-wrap的简写形式，比如flex-flow: column wrap;

• justify-content：确定在主轴上的对齐方式，包括flex-start, flex-end, center, space-between, space-around；

  
  
  justify-content

• align-items：定义项目在交叉轴上如何对齐，包括flex-start, flex-end, center, baseline, stretch(默认值)；

  
  
  align-items
• align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用；

4. 项目的属性

• order：项目排列顺序，默认为0，数字越小排列越向前；
• flex-grow：项目的放大比例，默认为0；
• flex-shrink：项目的缩小比例，默认为1；
• flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size），浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小；
• flex：flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto；
• align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch；