CSS Flex
flex 布局总结 - 图1
flex
下边按照上图的顺序来详细说明下每个属性的作用，并且参考 W3C 提到的代码结构：

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <style>
  5.       // 父元素
  6.       .flex-container {
  7.         display: flex;
  8.         flex-direction: row;
  9.         background-color: DodgerBlue;
  10.       }
  12.       // 子元素
  13.       .flex-container > div {
  14.         background-color: #f1f1f1;
  15.         width: 100px;
  16.         margin: 10px;
  17.         text-align: center;
  18.         line-height: 75px;
  19.         font-size: 30px;
  20.       }
  21.     </style>
  22.   </head>
  23.   <body>
  24.     <div class="flex-container">
  25.       <div>1</div>
  26.       <div>2</div>
  27.       <div>3</div>  
  28.     </div>
  30.   </body>
  31. </html>

代码总体结构都是上边的样子，下边介绍的时候就省略了。

flex

display: flex;
父元素变为 flex 布局，并且为 block 块级元素。

  1. .flex-container {
  2.   display: flex;
  3.   background-color: DodgerBlue;
  4.   margin: 10px;
  5. }
  7. .flex-container > div {
  8.   background-color: #f1f1f1;
  9.   margin: 10px;
  10.   padding: 20px;
  11.   font-size: 30px;
  12. }
  1. <div class="flex-container">
  2.   <div>1</div>
  3.   <div>2</div>
  4.   <div>3</div>  
  5. </div>
  6. <div class="flex-container">
  7.   <div>4</div>
  8.   <div>5</div>
  9.   <div>6</div>  
  10. </div>

flex 布局总结 - 图2
display: inline-flex;
父元素变为 flex 布局，并且是行内元素。

  1. .flex-container {
  2.   display: inline-flex;
  3.   background-color: DodgerBlue;
  4.   margin: 10px;
  5. }
  7. .flex-container > div {
  8.   background-color: #f1f1f1;
  9.   margin: 10px;
  10.   padding: 20px;
  11.   font-size: 30px;
  12. }
  1. <div class="flex-container">
  2.   <div>1</div>
  3.   <div>2</div>
  4.   <div>3</div>  
  5. </div>
  6. <div class="flex-container">
  7.   <div>4</div>
  8.   <div>5</div>
  9.   <div>6</div>  
  10. </div>

两个元素会在同一行展示。
flex 布局总结 - 图3

flex-direction

display: flex/inline-flex -> 父元素 -> flex-flow: -> flex-direction: -> row
row 为默认值

  1. .flex-container {
  2.   display: flex;
  3.   flex-direction: row;
  4.   background-color: DodgerBlue;
  5. }

在水平方向从左到右排列，同时决定了主轴为水平方向。
flex 布局总结 - 图4
display: flex/inline-flex -> 父元素 -> flex-flow: -> flex-direction: -> row-reverse

  1. .flex-container {
  2.   display: flex;
  3.   flex-direction: row-reverse;
  4.   background-color: DodgerBlue;
  5. }

在水平方向从右到左排列，同时决定了主轴为水平方向。
flex 布局总结 - 图5
display: flex/inline-flex -> 父元素 -> flex-flow: -> flex-direction: -> column

  1. .flex-container {
  2.   display: flex;
  3.   flex-direction: column;
  4.   background-color: DodgerBlue;
  5. }

在垂直方向从上到下排列，同时决定了主轴为垂直方向。
flex 布局总结 - 图6
display: flex/inline-flex -> 父元素 -> flex-flow: -> flex-direction: -> column-reverse

  1. .flex-container {
  2.   display: flex;
  3.   flex-direction: column-reverse;
  4.   background-color: DodgerBlue;
  5. }

在垂直方向从下到上排列，同时决定了主轴为垂直方向。
flex 布局总结 - 图7
下边为了简明，各属性都是默认主轴为水平方向进行举例

flex-wrap

display: flex/inline-flex -> 父元素 -> flex-flow: ->flex-wrap: -> wrap

  1. .flex-container {
  2.   display: flex;
  3.   flex-wrap: wrap;
  4.   background-color: DodgerBlue;
  5. }

当空间不够的时候自动换行。
flex 布局总结 - 图8
display: flex/inline-flex -> 父元素 -> flex-flow: -> flex-direction: -> nowrap
nowrap 为默认值。

  1. .flex-container {
  2.   display: flex;
  3.   flex-wrap: nowrap;
  4.   background-color: DodgerBlue;
  5. }

当空间不够不进行换行，默认会进行压缩。
flex 布局总结 - 图9
display: flex/inline-flex -> 父元素 -> flex-flow: -> flex-direction: -> wrap-reverse

  1. .flex-container {
  2.   display: flex;
  3.   flex-wrap: wrap-reverse;
  4.   background-color: DodgerBlue;
  5. }

在水平方向从左到右排列，同时使交叉轴的排列方向反向。
默认交叉轴是垂直方向，并且是从上到下。所以加了 wrap-reverse 就是从下到上了。
flex 布局总结 - 图10

flex-flow

display: flex/inline-flex -> 父元素 -> flex-flow:
上边介绍的 flex-direction 和 flex-wrap 可以合写为 flex-flow ，它们共同决定了主轴和交叉轴的排列方向，从左到右（从右到左）和从上到下（从下到上）的组合。

  1. .flex-container {
  2.   display: flex;
  3.   flex-flow: row-reverse wrap-reverse;
  4.   background-color: DodgerBlue;
  5. }

主轴为水平方向，row-reverse 从右到左，wrap-reverse 交叉轴从下到上。
flex 布局总结 - 图11

justify-content

display: flex/inline-flex -> 父元素 -> 单行元素的对齐方式 -> （主轴-默认水平方向）justify-content: -> center

  1. .flex-container {
  2.   display: flex;
  3.   justify-content: center;
  4.   background-color: DodgerBlue;
  5. }

子元素居中
flex 布局总结 - 图12
display: flex/inline-flex -> 父元素 -> 单行元素的对齐方式 -> （主轴-默认水平方向）justify-content: -> flex-start

  1. .flex-container {
  2.   display: flex;
  3.   justify-content: flex-start;
  4.   background-color: DodgerBlue;
  5. }

子元素靠左对齐，并且 flex-start 为默认值。
flex 布局总结 - 图13
display: flex/inline-flex -> 父元素 -> 单行元素的对齐方式 -> （主轴-默认水平方向）justify-content: -> flex-end

  1. .flex-container {
  2.   display: flex;
  3.   justify-content: flex-end;
  4.   background-color: DodgerBlue;
  5. }

子元素靠右对齐。
flex 布局总结 - 图14
display: flex/inline-flex -> 父元素 -> 单行元素的对齐方式 -> （主轴-默认水平方向）justify-content: -> space-around

  1. .flex-container {
  2.   display: flex;
  3.   justify-content: space-around;
  4.   background-color: DodgerBlue;
  5. }

子元素均匀分布，元素之间的空白是两边的两倍。
flex 布局总结 - 图15
display: flex/inline-flex -> 父元素 -> 单行元素的对齐方式 -> （主轴-默认水平方向）justify-content: -> space-between

  1. .flex-container {
  2.   display: flex;
  3.   justify-content: space-between;
  4.   background-color: DodgerBlue;
  5. }

子元素均匀分布，两边不留白。
flex 布局总结 - 图16
display: flex/inline-flex -> 父元素 -> 单行元素的对齐方式 -> （主轴-默认水平方向）justify-content: -> space-evenly

  1. .flex-container {
  2.   display: flex;
  3.   justify-content: space-evenly;
  4.   background-color: DodgerBlue;
  5. }

子元素真均匀分布，空白全部相同。
flex 布局总结 - 图17

align-items

display: flex/inline-flex -> 父元素 -> 单行元素的对齐方式 -> （交叉轴-默认垂直方向）align-items: -> center

  1. .flex-container {
  2.   display: flex;
  3.   height: 200px;
  4.   align-items: center;
  5.   background-color: DodgerBlue;
  6. }

子元素垂直方向居中。
flex 布局总结 - 图18
display: flex/inline-flex -> 父元素 -> 单行元素的对齐方式 -> （交叉轴-默认垂直方向）align-items: -> flex-start

  1. .flex-container {
  2.   display: flex;
  3.   height: 200px;
  4.   align-items: flex-start;
  5.   background-color: DodgerBlue;
  6. }

子元素垂直方向顶部。
flex 布局总结 - 图19
display: flex/inline-flex -> 父元素 -> 单行元素的对齐方式 -> （交叉轴-默认垂直方向）align-items: -> flex-end

  1. .flex-container {
  2.   display: flex;
  3.   height: 200px;
  4.   align-items: flex-end;
  5.   background-color: DodgerBlue;
  6. }

子元素垂直方向底部。
flex 布局总结 - 图20
display: flex/inline-flex -> 父元素 -> 单行元素的对齐方式 -> （交叉轴-默认垂直方向）align-items: -> stretch

  1. .flex-container {
  2.   display: flex;
  3.   height: 200px;
  4.   align-items: stretch;
  5.   background-color: DodgerBlue;
  6. }

子元素垂直方向拉伸，stretch 为默认值。
flex 布局总结 - 图21
display: flex/inline-flex -> 父元素 -> 单行元素的对齐方式 -> （交叉轴-默认垂直方向）align-items: -> baseline

  1. .flex-container {
  2.   display: flex;
  3.   height: 200px;
  4.   align-items: baseline;
  5.   background-color: DodgerBlue;
  6. }
  1. <div class="flex-container">
  2.   <div><h1>1</h1></div>
  3.   <div><h6>2</h6></div>
  4.   <div><h3>3</h3></div>  
  5.   <div><small>4</small></div>  
  6. </div>

当字体大小不一致的时候，根据字体的 baseline 对齐。
flex 布局总结 - 图22

align-content

display: flex/inline-flex -> 父元素 -> 多行元素的对齐方式 -> （交叉轴-垂直方向）align-content: -> space-between

  1. .flex-container {
  2.   display: flex;
  3.   height: 600px;
  4.   flex-wrap: wrap;
  5.   align-content: space-between;
  6.   background-color: DodgerBlue;
  7. }

垂直方向，均匀分布，顶部底部没有空白。
flex 布局总结 - 图23
display: flex/inline-flex -> 父元素 -> 多行元素的对齐方式 -> （交叉轴-垂直方向）align-content: -> space-around

  1. .flex-container {
  2.     display: flex;
  3.     height: 600px;
  4.     flex-wrap: wrap;
  5.     align-content: space-around;
  6.     background-color: DodgerBlue;
  7. }

垂直方向，均匀分布，顶部底部有空白，是元素之前空白的一半。
flex 布局总结 - 图24
display: flex/inline-flex -> 父元素 -> 多行元素的对齐方式 -> （交叉轴-垂直方向）align-content: -> space-evenly

  1. .flex-container {
  2.   display: flex;
  3.   height: 600px;
  4.   flex-wrap: wrap;
  5.   align-content: space-evenly;
  6.   background-color: DodgerBlue;
  7. }

垂直方向，真均匀分布，空白全部相同。
flex 布局总结 - 图25
display: flex/inline-flex -> 父元素 -> 多行元素的对齐方式 -> （交叉轴-垂直方向）align-content: -> stretch

  1. .flex-container {
  2.   display: flex;
  3.   height: 600px;
  4.   flex-wrap: wrap;
  5.   align-content: stretch;
  6.   background-color: DodgerBlue;
  7. }

垂直拉伸占据空间剩余的空间，stretch 为默认值。
flex 布局总结 - 图26
display: flex/inline-flex -> 父元素 -> 多行元素的对齐方式 -> （交叉轴-垂直方向）align-content: -> flex-start

  1. .flex-container {
  2.   display: flex;
  3.   height: 600px;
  4.   flex-wrap: wrap;
  5.   align-content: flex-start;
  6.   background-color: DodgerBlue;
  7. }

垂直方向，顶部对齐。
flex 布局总结 - 图27
display: flex/inline-flex -> 父元素 -> 多行元素的对齐方式 -> （交叉轴-垂直方向）align-content: -> flex-end

  1. .flex-container {
  2.   display: flex;
  3.   height: 600px;
  4.   flex-wrap: wrap;
  5.   align-content: flex-end;
  6.   background-color: DodgerBlue;
  7. }

垂直方向，底部对齐。
flex 布局总结 - 图28

order

display: flex/inline-flex -> 子元素 -> order

  1. .flex-container {
  2.   display: flex;
  3.   background-color: #f1f1f1;
  4. }
  1. <div class="flex-container">
  2.   <div style="order: 3">1</div>
  3.   <div style="order: 2">2</div>
  4.   <div style="order: 4">3</div> 
  5.   <div style="order: 1">4</div>
  6. </div>

根据 order 排列。
flex 布局总结 - 图29

flex-grow

display: flex/inline-flex -> 子元素 -> flex -> flex-grow

  1. .flex-container {
  2.   display: flex;
  3.   background-color: #f1f1f1;
  4. }
  1. <div class="flex-container">
  2.   <div style="flex-grow: 1">1</div>
  3.   <div style="flex-grow: 1">2</div>
  4.   <div style="flex-grow: 8">3</div>
  5. </div>

当有剩余空间时，是否进行拉伸，默认值 0 ，不拉伸。
有多个元素设置 flex-grow 的时候，值代表他们要增加的长度各自占额外空间的比例。
flex 布局总结 - 图30

flex-shrink

display: flex/inline-flex -> 子元素 -> flex -> flex-shrink

  1. .flex-container {
  2.   display: flex;
  3.   background-color: #f1f1f1;
  4. }
  5. .flex-container>div {
  6.   background-color: DodgerBlue;
  7.   color: white;
  8.   width: 100px;
  9.   margin: 10px;
  10.   text-align: center;
  11.   line-height: 75px;
  12.   font-size: 30px;
  13. }
  1. <div class="flex-container">
  2.   <div>1</div>
  3.   <div>2</div>
  4.   <div style="flex-shrink: 0">3</div>
  5.   <div>4</div>
  6.   <div>5</div>
  7.   <div>6</div>
  8.   <div>7</div>
  9.   <div>8</div>
  10.   <div>9</div>
  11.   <div>10</div>
  12. </div>

当空间不足时，是否进行压缩，默认值是 1，进行压缩，0 代表不压缩。
有多个元素设置 flex-shrink 的时候，值代表他们各自占要减少空间的比例。
flex 布局总结 - 图31

flex-basis

display: flex/inline-flex -> 子元素 -> flex-> flex-basis

  1. .flex-container {
  2.   display: flex;
  3.   background-color: #f1f1f1;
  4. }
  5. .flex-container>div {
  6.   background-color: DodgerBlue;
  7.   color: white;
  8.   width: 100px;
  9.   margin: 10px;
  10.   text-align: center;
  11.   line-height: 75px;
  12.   font-size: 30px;
  13. }
  1. <div class="flex-container">
  2.   <div>1</div>
  3.   <div>2</div>
  4.   <div style="flex-basis:200px">3</div>
  5.   <div>4</div>
  6. </div>

主轴方向初始的宽度。
flex 布局总结 - 图32

flex

display: flex/inline-flex -> 子元素 -> flex
flex-grow、 flex-shrink 、 flex-basis 三个属性的合并写法。

  1. .flex-container {
  2.   display: flex;
  3.   background-color: #f1f1f1;
  4. }
  1. <div class="flex-container">
  2.   <div>1</div>
  3.   <div>2</div>
  4.   <div style="flex: 0 0 200px">3</div>
  5.   <div>4</div>
  6. </div>

flex 布局总结 - 图33

align-self

和 align-items 的属性相同，优先级更高，覆盖父元素的属性。

  1. .flex-container {
  2.   display: flex;
  3.   height: 200px;
  4.   background-color: #f1f1f1;
  5. }
  1. <div class="flex-container">
  2.   <div>1</div>
  3.   <div>2</div>
  4.   <div style="align-self: center">3</div>
  5.   <div>4</div>
  6. </div>

默认是 stretch，3 元素将会居中。
flex 布局总结 - 图34