Flex布局（1）

文章转载自阮一峰的《Flex布局教程：语法篇》
链接地址

一、什么是Flex布局

• 任何块级元素以及行级元素都可以定义为flex布局

  div{
      display: flex;
  }
  span{
      display: inline-flex;
  }
  

• Webkit内核的浏览器，必须加上-webkit前缀

  .box{
    display: -webkit-flex; /* Safari */
    display: flex;
  }
  

• 设为Flex布局以后，子元素的float、clear和vertical-align属性都会失效

二、基本概念

看图说话，
- flex容器内的成员称作项目，每一个项目所占水平位置的大小叫做main size，垂直方向上的大小叫做cross size
- 整个flex容器有两个轴线，水平方向的主轴线，垂直方向的交叉线
- 轴线的开始位置start和轴线的结束位置end

三、容器的属性

1、flex-direction：决定主轴的方向（即项目的排列方向）

取值：
- column-reverse：主轴为竖直方向，起点在下端
- column：主轴为竖直方向，起点在上端
- row：主轴为水平方向，起点在左端（默认值）
- row-reverse：主轴为水平方向，起点在右端

分别对应下面的图片

2、flex-wrap：默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

取值：
- nowrap：不换行（默认）
- wrap：换行，第一行在上方
- wrap-reverse：换行，第一行在下方

分别对应下面的图片

（1）nowrap

（2）wrap

（3）wrap-reverse

3、flex-flow：该属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

4、justify-content：属性定义了项目在主轴上的对齐方式

取值：（这里假设主轴是从左到右）
- flex-start ：从主轴的开始位置排列
- flex-end：从主轴结束的位置排列
- center：居中排列
- space-between： 两端对齐，项目之间的间隔都相等
- space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

对应下面的图示

5、align-items：定义项目（flex容器内的子元素）在交叉轴上如何对齐

取值：（这里假设主轴是从左到右）
- flex-start ：从主轴的开始位置排列
- flex-end：从主轴结束的位置排列
- center：交叉轴的中点对齐
- baseline： 项目的第一行文字的基线对齐
- stretch：如果项目未设置高度或设为auto，将占满整个容器的高度（默认值）

对应下面的图示

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

取值：（这里假设主轴是从左到右）
- flex-start ：与交叉轴的起点对齐
- flex-end：与交叉轴的终点对齐
- center：交叉轴的中点对齐
- space-between： 与交叉轴两端对齐，轴线之间的间隔平均分布
- space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch：轴线占满整个交叉轴（默认值）

对应下面的图示