前言

CSS的一个重点应用就是网页布局。传统的布局方式，都是基于盒模型，主要通过display, position和float来实现，但是一些特殊的布局方式处理起来非常不便，如垂直居中这种方式。flex布局是W3C在2009年推出的一种方式，可以完整、简单以及响应式地实现各种页面布局，目前得到了几乎所有浏览器的支持。IE可以兼容到10+以上版本。包括：

Chrome 29+
Firefox 28+
Internet Explorer 11
Opera 17+
Safari 6.1+ (prefixed with -webkit-)
Android 4.4+
iOS 7.1+ (prefixed with -webkit-) 更多的布局兼容性可以参考：Can I Use,其中关于FlexBox的兼容性由以下图示：说明：

红色表示不支持；
草黄色表示部分支持；
绿色表示支持。

有了这么多的布局方式，为什么还要引入flex布局呢？
因为它十分简单灵活，只需要几行简单的代码就可以简便、完整、响应式地实现各种页面布局，在没有接触过flex布局之前，相信大家都或多或少受到float、display、position这些属性的困扰。然而对于Flex 布局，你只要学习几个 CSS 属性，就可以写出简洁优雅复杂的页面布局。flex布局可以控制未知容器元素的对齐方式，排列方向，排列顺序等，甚至是在未知大小的容器也能这样做。它的主要特点是：可以修改其子元素（item）的宽和高，使得它们在不同的屏幕尺寸中可以填补可用的空间。

1.基本知识

1.1 什么是flex布局

flex布局就是弹性布局，用来为盒模型提供最大的灵活性，其实任何一个容器都可以指定为flex布局。
如：

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

行内元素同样也可以使用flex布局。

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

但是需要注意的是：设置flex布局之后，子元素的float,clear,vertical-align属性将会失效。

1.2 基本概念

采用Flex布局的元素是Flex容器（flex container），简称"容器"。它的所有子元素都是容器成即：Flex项目（flex item）。
在flex容器中，默认存在两根轴：水平主轴（main axis）和垂直交叉轴（cross axis）。main start是从主轴开始的位置与边框的交叉点，结束位置是main end; cross start是从交叉轴开始的位置，结束的位置叫做cross end.

1.2 flex容器的属性

flex容器共有以下几个属性。

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
flex-grow
flex-shrink
flex-basis 下面分别对每个属性的作用进行讲解。
(1) flex-direction
该属性决定了主轴的方向。也就是每个item的排列方向。取值包括：

flex-direction: row (默认值)主轴为水平方向，起点在左端。
flex-direction: row-reverse主轴为水平方向，起点在右端。
flex-direction: column主轴为垂直方向，起点在上沿。
flex-direction: column-reverse主轴为垂直方向，起点在下沿。

(2) flex-wrap
默认情况下，项目排列在一条轴线上。而该属性定义的就是，如果一条轴线排不下，如何换行。它的取值包括：

flex-wrap: nowrap(默认)不换行。
flex-wrap: wrap换行，第一行在上方。
flex-wrap: wrap-reverse换行，第一行在下方。

(3) flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。 (4)justify-content
该属性定义了项目在主轴上的对齐方式。
该属性的取值有5个，对齐方式与轴的方向有关，假设轴的方向为从左到右。

flex-start(default): 左对齐
flex-end: 右对齐
center：居中
space-between: 两端对齐，项目之间的间隔都相等
space-around: 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

(5) align-items
该属性定义了Flex子元素在容器侧轴对齐方式，类似于justify-content，只不过不是水平方向，而是纵向。这个属性可以设置所有flex子元素对齐方式，并且包括匿名元素。它的取值也有5个。

flex-start: 交叉轴的起点对齐；
flex-end: 交叉轴的终点对齐；
center: 交叉轴的中点对齐；
stretch: default, 如果items未设置高度或设为auto,将占满整个容器的高度； 
baseline: items的第一行文字的基线对齐；

(6)align-content
该属性决定了多条轴线的对齐方式，指flex容器内的每行在flex容器中侧轴排列方式,倘若只有一条轴线，该属性不起作用。该属性有6个值：

flex-start：与侧轴的起点对齐。
flex-end：与侧轴的终点对齐。
center：与侧轴的中点对齐。
space-between：与侧轴两端对齐，轴线之间的间隔平均分布。
space-around：侧轴每行平均分布，轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（default）：侧轴各行占满整个侧轴线。如果子元素未设置高度或设为auto，Flex子元素会沿着flex容器侧轴方向填满整个flex容器高度；如果设置高度，则每行按实际高度显示，并且多行会占满整个容器。需要说明一下侧轴是从左向右，则应该是指宽度；侧轴从上向下，则应该是指高度注意：所有column-xx属性在flex容器上都不生效；flex容器上不可使用::first-line和::first-letter两个伪元素 (7)flex-grow
该属性用来指定 flex子元素放大比例，所有参与的子元素会根据 flex-grow 计算出对应的百分比来填充整个容器。默认为0，如果有的子元素没有设置，即取默认值，则该子元素的宽度为其实际宽度。如果所有flex子元素的flex-grow值相同，那么flex子元素在flex容器中具有相同的尺寸。（注意：设置负数无效）

.flex-item {
  -webkit-flex-grow: <number>; /* Safari */
  flex-grow:         <number>;
}

(8)flex-shrink
flex-shrink属性定义了子元素的缩小比例，即如果空间不足，该子元素将缩小。数值越大，缩小越多。默认值为1。如果设为0，则不缩放如果所有子元素的flex-shrink属性都设为一样的值（0除外），当空间不足时，都将等比例缩小。如果其中的部分子元素 flex-shrink属性为0，其他子元素都为1，则父容器空间不足时，属性值为0的子元素不缩小。如果子元素的属性值部分或全部为0时，当父容器空间不足时，会导致溢出。

.flex-item {
  -webkit-flex-shrink: <number>; /* Safari */
  flex-shrink:         <number>;
}

(9)flex-basis
flex-basis属性定义了在分配多余空间之前，子元素占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间，尽量大的填充该属性值，比如设为200px; 如果除去其他子元素后有大于等于200px 的空间，则该子元素在主轴上为200px。如果除去其他子元素后有小于200px 的空间，则按父容器减去其他子元素主轴大小后的空间来设置。它的默认值为auto，即子元素的本来大小。

该属性用来指定其中某一子元素固定高度或宽度，如果空间大，按指定的大小来显示，如果空间小，则用剩余的空间大小来填充。

该属性值可以设为跟width或height属性一样的值（比如200px），主轴为main axis时指宽度，主轴为cross axis指高度.

.flex-item {
  -webkit-flex-basis: auto | 200px; /* Safari */
  flex-basis:         auto | 200px;
}

2. 实际应用

等间距卡片式布局(高度固定)

什么意思呢，也就是说页面中展示卡片的样式，且每个客片之间的间距保持一致（此处: 水平间距20px，垂直间距20px）; CSS的层级结构为：

.parent {
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  .card-box {
    width: 100%;
    height: 256px;
    flex: 0 0 31%; // 如果每行指向放置2个卡片，则设置为flex: 0 0 47%即可(因为中间有设置有间距，所以不能设置为flex: 0 0 50%)
    margin: 0 20px 20px 0;
    background-color: #f9f9f9;
    border-radius: 4px;
    border: solid 1px #e1e1e1;
    .title {
      margin: 15px 0 10px 30px;
    }
    .text {
      margin: 0 30px;
    }
  }
}

说明：

footer不随视窗变化而浮动的粘性布局

.container {
  display: flex;
  flex-direction: column;
  .content {
    height: 200px;
    padding-top: 30px;
    text-align: center;
    background-color: @c-bg;
  }
  .footer {
    margin-top: auto;
    flex-shrink: 0;
    height: 100px;
    background: #222222;
    padding: 30px 0 0 0;
    text-align: center;
    color: #ffffff;
  }
}

多重边框

HTML：
<main>
  <div></div>
  <div></div>
</main>
CSS:
main {
  width: 100%;
  padding: 0 10vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  div:nth-of-type(1) {
    text-align: center;
    vertical-align: middle;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #ffffff;
    margin: 105px 29px;
    box-shadow: 0 0 0 10px #117ce9, 0 0 0 20px #187ed6, 0 0 0 30px #0261b5, 0 0 0 40px #0061b5, 0 0 0 50px #14adea,
      0 0 0 60px #0061b5, 0 0 0 70px #08becf, 0 0 0 80px #14adea;
  }
  div:nth-of-type(2) {
    text-align: center;
    width: 200px;
    height: 120px;
    background: #ffffff;
    border: 5px solid #187ed6;
    outline: #08becf dashed 1px;
    outline-offset: -10px;
    margin-bottom: 20px;
    .content {
      transform: translateY(50%);
    }
  }
}

瀑布流布局

HTML:
<div class="g-container">
    <div class="g-queue" v-for="i in 4" :key="i + 'queue'">
      <div class="g-item" v-for="j in 3" :key="j + 'item'" :style="'height:' + j * (i + 3) * 5 + 'px'">
      </div>
    </div>
  </div>

CSS:
.g-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  overflow: hidden;
  padding: 30px;
  .g-queue {
    display: flex;
    flex-direction: column;
    flex-basis: 24%;
    background-color: #f9f9f9;
    .g-item {
      position: relative;
      width: 100%;
      margin: 2.5% 0;
      background-color: #14adea;

      border-radius: 4px;
      &::after {
        content: 'test';
        position: absolute;
        color: #ffffff;
        text-align: center;
        font-size: 15px;
        line-height: 1.73;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
}

参考文章

Flex 布局教程：语法篇- 阮一峰的网络日志
 终极flexbox属性查询列表

揭开flex布局的神秘面纱

前言