Flex布局 - 图1

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
demo 地址

Flex布局是什么

Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。

  1. .box{
  2.   display: flex;
  3. }

行内元素也可以使用 Flex 布局。

  1. .box{
  2.   display: inline-flex;
  3. }

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

  1. .box{
  2.   display: -webkit-flex; /* Safari */
  3.   display: flex;
  4. }

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称”项目”。
Flex布局 - 图2
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

容器的属性

容器上可以设置以下6个属性

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

flex-direction

flex-direction属性决定主轴的方向（即项目的排列方向）

  1. .box {
  2.   flex-direction: row | row-reverse | column | column-reverse;
  3. }

Flex布局 - 图3
它有4个值：

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

flex-wrap

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

Flex布局 - 图4

  1. .box{
  2.   flex-wrap: nowrap | wrap | wrap-reverse;
  3. }

它可能取三个值。
（1）nowrap（默认）：不换行。
Flex布局 - 图5

（2）wrap：换行，第一行在上方。
Flex布局 - 图6

（3）wrap-reverse：换行，第一行在下方。
Flex布局 - 图7

flex-flow

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

  1. .box {
  2.   flex-flow: <flex-direction> || <flex-wrap>;
  3. }

justify-content

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

  1. .box {
  2.   justify-content: flex-start | flex-end | center | space-between | space-around;
  3. }

Flex布局 - 图8
它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

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

align-items

align-items属性定义项目在交叉轴上如何对齐。

  1. .box {
  2.   align-items: flex-start | flex-end | center | baseline | stretch;
  3. }

Flex布局 - 图9
它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

  • flex-start：交叉轴的起点对齐。
  • flex-end：交叉轴的终点对齐。
  • center：交叉轴的中点对齐。
  • baseline: 项目的第一行文字的基线对齐。
  • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content

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

  1. .box {
  2.   align-content: flex-start | flex-end | center | space-between | space-around | stretch;
  3. }

Flex布局 - 图10
该属性可能取6个值。

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

项目的属性

以下6个属性设置在项目上。

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

    order属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

  1. .item {
  2.   order: <integer>;
  3. }

Flex布局 - 图11

flex-grow属性

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

  1. .item {
  2.   flex-grow: <number>; /* default 0 */
  3. }

Flex布局 - 图12
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink属性

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

  1. .item {
  2.   flex-shrink: <number>; /* default 1 */
  3. }

Flex布局 - 图13
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。

flex-basis属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

  1. .item {
  2.   flex-basis: <length> | auto; /* default auto */
  3. }

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

  1. .item {
  2.   flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
  3. }

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

  1. .item {
  2.   align-self: auto | flex-start | flex-end | center | baseline | stretch;
  3. }

Flex布局 - 图14
该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

实例代码

flex.html

  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Flex 布局示例</title>
  7.     <link rel="stylesheet" type="text/css" href="style.css">
  8. </head>
  9. <body>
  10.     <h1>Flex 布局示例</h1>
  11.     <p>感谢阮一峰老师的教程<a target="_blank" href="http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html">http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html</a>
  12.     <br>本示例将教程上所有的布局都简单的实现了一遍，并保存GitHub上面
  13.     <br><a href="https://github.com/JailBreakC/flex-box-demo">https://github.com/JailBreakC/flex-box-demo</a></p>
  14.     <h2>容器的属性</h2>
  15.     <h3>1、flex-direction属性</h3>
  16.     <p>flex-direction属性决定主轴的方向（即项目的排列方向）。</p>
  17.     <p>
  18.         .box {
  19.             flex-direction: row | row-reverse | column | column-reverse;
  20.         }
  21.     </p>
  22.     <div class="box box-1">
  23.         <div class="box-item">1</div>
  24.         <div class="box-item">2</div>
  25.         <div class="box-item">3</div>
  26.         <div class="box-item">4</div>
  27.     </div>
  29.     <h3>2、flex-wrap属性</h3>
  30.     <p>默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。</p>
  31.     <p>
  32.         .box{
  33.             flex-wrap: nowrap | wrap | wrap-reverse;
  34.         }
  35.     </p>
  36.     <p>nowrap（默认）：不换行。</p>
  37.     <div class="box box-2">
  38.         <div class="box-item">1</div>
  39.         <div class="box-item">2</div>
  40.         <div class="box-item">3</div>
  41.         <div class="box-item">4</div>
  42.         <div class="box-item">5</div>
  43.         <div class="box-item">6</div>
  44.         <div class="box-item">7</div>
  45.     </div>
  46.     <p>wrap：换行，第一行在上方。</p>
  47.     <div class="box box-3">
  48.         <div class="box-item">1</div>
  49.         <div class="box-item">2</div>
  50.         <div class="box-item">3</div>
  51.         <div class="box-item">4</div>
  52.         <div class="box-item">5</div>
  53.         <div class="box-item">6</div>
  54.         <div class="box-item">7</div>
  55.     </div>
  56.     <p>wrap-reverse：换行，第一行在下方。</p>
  57.     <div class="box box-4">
  58.         <div class="box-item">1</div>
  59.         <div class="box-item">2</div>
  60.         <div class="box-item">3</div>
  61.         <div class="box-item">4</div>
  62.         <div class="box-item">5</div>
  63.         <div class="box-item">6</div>
  64.         <div class="box-item">7</div>
  65.     </div>
  67.     <h3>3、flex-flow</h3>
  68.     <p>flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。</p>
  69.     <p>
  70.         .box {
  71.             flex-flow: &lt;flex-direction&gt; || &lt;flex-wrap&gt;;
  72.         }
  73.     </p>
  74.     <div class="box box-5">
  75.         <div class="box-item">1</div>
  76.         <div class="box-item">2</div>
  77.         <div class="box-item">3</div>
  78.         <div class="box-item">4</div>
  79.         <div class="box-item">5</div>
  80.         <div class="box-item">6</div>
  81.         <div class="box-item">7</div>
  82.     </div>
  84.     <h3>4、justify-content属性</h3>
  85.     <p>justify-content属性定义了项目在主轴上的对齐方式。</p>
  86.     <p>
  87.         .box {
  88.             justify-content: flex-start | flex-end | center | space-between | space-around;
  89.         }
  90.     </p>
  91.     <p>flex-start（默认值）：左对齐</p>
  92.     <div class="box box-6">
  93.         <div class="box-item">1</div>
  94.         <div class="box-item">2</div>
  95.         <div class="box-item">3</div>
  96.         <div class="box-item">4</div>
  97.     </div>
  98.     <p>flex-end：右对齐</p>
  99.     <div class="box box-7">
  100.         <div class="box-item">1</div>
  101.         <div class="box-item">2</div>
  102.         <div class="box-item">3</div>
  103.         <div class="box-item">4</div>
  104.     </div>
  105.     <p>center： 居中</p>
  106.     <div class="box box-8">
  107.         <div class="box-item">1</div>
  108.         <div class="box-item">2</div>
  109.         <div class="box-item">3</div>
  110.         <div class="box-item">4</div>
  111.     </div>
  112.     <p>space-between：两端对齐，项目之间的间隔都相等。</p>
  113.     <div class="box box-9">
  114.         <div class="box-item">1</div>
  115.         <div class="box-item">2</div>
  116.         <div class="box-item">3</div>
  117.         <div class="box-item">4</div>
  118.     </div>
  119.     <p>space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。</p>
  120.     <div class="box box-10">
  121.         <div class="box-item">1</div>
  122.         <div class="box-item">2</div>
  123.         <div class="box-item">3</div>
  124.         <div class="box-item">4</div>
  125.     </div>
  127.     <h3>5、align-items属性</h3>
  128.     <p>align-items属性定义项目在交叉轴上如何对齐。</p>
  129.     <p>
  130.         .box {
  131.              align-items: flex-start | flex-end | center | baseline | stretch;
  132.         }
  134.     </p>
  135.     <p>flex-start：交叉轴的起点对齐。</p>
  136.     <div class="box box-11">
  137.         <div class="box-item">1</div>
  138.         <div class="box-item item-tall">2</div>
  139.         <div class="box-item">3</div>
  140.         <div class="box-item item-tall">4</div>
  141.     </div>
  142.     <p>flex-end：交叉轴的终点对齐。</p>
  143.     <div class="box box-12">
  144.         <div class="box-item">1</div>
  145.         <div class="box-item item-tall">2</div>
  146.         <div class="box-item">3</div>
  147.         <div class="box-item item-tall">4</div>
  148.     </div>
  149.     <p>center：交叉轴的中点对齐。</p>
  150.     <div class="box box-13">
  151.         <div class="box-item">1</div>
  152.         <div class="box-item item-tall">2</div>
  153.         <div class="box-item">3</div>
  154.         <div class="box-item item-tall">4</div>
  155.     </div>
  156.     <p>baseline: 项目的第一行文字的基线对齐。</p>
  157.     <div class="box box-14 line">
  158.         <div class="box-item">1</div>
  159.         <div class="box-item item-tall">2</div>
  160.         <div class="box-item">3</div>
  161.         <div class="box-item item-tall">4</div>
  162.     </div>
  163.     <p>stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。</p>
  164.     <div class="box box-15">
  165.         <div class="box-item">1</div>
  166.         <div class="box-item item-tall">2</div>
  167.         <div class="box-item">3</div>
  168.         <div class="box-item item-tall">4</div>
  169.     </div>
  171.     <h3>6、align-content属性</h3>
  172.     <p>align-content属性定义了多根轴线（多行）的对齐方式。如果项目只有一根轴线，该属性不起作用。</p>
  173.     <p>
  174.         .box {
  175.           align-content: flex-start | flex-end | center | space-between | space-around | stretch;
  176.         }
  178.     </p>
  179.     <p>flex-start：交叉轴的起点对齐。</p>
  180.     <div class="box box-tall box-16">
  181.         <div class="box-item">1</div>
  182.         <div class="box-item">2</div>
  183.         <div class="box-item">3</div>
  184.         <div class="box-item">4</div>
  185.         <div class="box-item">5</div>
  186.         <div class="box-item">6</div>
  187.         <div class="box-item">7</div>
  188.         <div class="box-item">8</div>
  189.         <div class="box-item">9</div>
  190.     </div>
  191.     <p>flex-end：与交叉轴的终点对齐。</p>
  192.     <div class="box box-tall box-17">
  193.         <div class="box-item">1</div>
  194.         <div class="box-item">2</div>
  195.         <div class="box-item">3</div>
  196.         <div class="box-item">4</div>
  197.         <div class="box-item">5</div>
  198.         <div class="box-item">6</div>
  199.         <div class="box-item">7</div>
  200.         <div class="box-item">8</div>
  201.         <div class="box-item">9</div>
  202.     </div>
  203.     <p>center：与交叉轴的中点对齐。</p>
  204.     <div class="box box-tall box-18">
  205.         <div class="box-item">1</div>
  206.         <div class="box-item">2</div>
  207.         <div class="box-item">3</div>
  208.         <div class="box-item">4</div>
  209.         <div class="box-item">5</div>
  210.         <div class="box-item">6</div>
  211.         <div class="box-item">7</div>
  212.         <div class="box-item">8</div>
  213.         <div class="box-item">9</div>
  214.     </div>
  215.     <p>space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。</p>
  216.     <div class="box box-tall box-19">
  217.         <div class="box-item">1</div>
  218.         <div class="box-item">2</div>
  219.         <div class="box-item">3</div>
  220.         <div class="box-item">4</div>
  221.         <div class="box-item">5</div>
  222.         <div class="box-item">6</div>
  223.         <div class="box-item">7</div>
  224.         <div class="box-item">8</div>
  225.         <div class="box-item">9</div>
  226.     </div>
  227.     <p>space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。</p>
  228.     <div class="box box-tall box-20">
  229.         <div class="box-item">1</div>
  230.         <div class="box-item">2</div>
  231.         <div class="box-item">3</div>
  232.         <div class="box-item">4</div>
  233.         <div class="box-item">5</div>
  234.         <div class="box-item">6</div>
  235.         <div class="box-item">7</div>
  236.         <div class="box-item">8</div>
  237.         <div class="box-item">9</div>
  238.     </div>
  239.     <p>stretch（默认值）：轴线占满整个交叉轴。</p>
  240.     <div class="box box-tall box-21">
  241.         <div class="box-item">1</div>
  242.         <div class="box-item">2</div>
  243.         <div class="box-item">3</div>
  244.         <div class="box-item">4</div>
  245.         <div class="box-item">5</div>
  246.         <div class="box-item">6</div>
  247.         <div class="box-item">7</div>
  248.         <div class="box-item">8</div>
  249.         <div class="box-item">9</div>
  250.     </div>
  252.     <h2>项目的属性</h2>
  253.     <h3>1、order属性</h3>
  254.     <p>order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。</p>
  255.     <p>
  256.         .item {
  257.           order: &lt;integer&gt;;
  258.         }
  259.     </p>
  260.     <div class="box box-22">
  261.         <div class="box-item">1</div>
  262.         <div class="box-item">2</div>
  263.         <div class="box-item">3</div>
  264.         <div class="box-item order">4 <div>(order:-1)</div></div>
  265.     </div>
  267.     <h3>2、flex-grow属性</h3>
  268.     <p>flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。</p>
  269.     <p>如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。</p>
  270.     <p>
  271.         .item {
  272.           flex-grow: &lt;number&gt;; /* default 0 */
  273.         }
  274.     </p>
  275.     <div class="box box-23">
  276.         <div class="box-item grow">1 <div>flex-grow: 1</div></div>
  277.         <div class="box-item grow grow-2">2 <div>flex-grow: 2</div></div>
  278.         <div class="box-item grow">3 <div>flex-grow: 1</div></div>
  279.     </div>
  281.     <h3>3、flex-shrink</h3>
  282.     <p>flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。</p>
  283.     <p>如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。<br>负值对该属性无效。</p>
  284.     <p>
  285.         .item {
  286.             flex-shrink: &lt;number&gt;; /* default 1 */
  287.         }
  288.     </p>
  289.     <div class="box box-24">
  290.         <div class="box-item shrink">1 <div>flex-shrink: 0</div></div>
  291.         <div class="box-item">2</div>
  292.         <div class="box-item">3</div>
  293.     </div>
  295.     <h3>4、flex-basis属性</h3>
  296.     <p>flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。</p>
  297.     <p>
  298.         .item {
  299.             flex-basis: &lt;length&gt;; | auto; /* default auto */
  300.         }
  301.     </p>
  302.     <div class="box box-25">
  303.         <div class="box-item">1</div>
  304.         <div class="box-item">2</div>
  305.         <div class="box-item">3</div>
  306.     </div>
  308.     <h3>5、flex属性</h3>
  309.     <p>flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。</p>
  310.     <p>该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。</p>
  311.     <p>
  312.         .item {
  313.             flex: none | [ &lt;'flex-grow'&gt; &lt;'flex-shrink'&gt;? || &lt;'flex-basis'&gt; ]
  314.         }
  315.     </p>
  317.     <h3>6、align-self属性</h3>
  318.     <p>align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。</p>
  319.     <p>
  320.         .item {
  321.             align-self: auto | flex-start | flex-end | center | baseline | stretch;
  322.         }
  323.     </p>
  324.     <div class="box box-26">
  325.         <div class="box-item">1</div>
  326.         <div class="box-item">2</div>
  327.         <div class="box-item end">3<div>flex-end</div></div>
  328.         <div class="box-item">4</div>
  329.     </div>
  330. </body>
  331. </html>

style.css

  1. body {
  2.     padding: 20px;
  3.     margin: 0 auto;
  4.     background-color: #E2E2E2;
  5.     max-width: 1024px;
  6.     color: #595B66;
  7.     font-family: 'Microsoft Yahei', sans-serif;
  8. }
  9. h1,h2,h3,h4 {
  10.     color: #797979;
  11.     // border-bottom: solid 1px #797979;
  12.     padding: 5px 0;
  13. }
  14. h1, h2 {
  15.     border-bottom: solid 2px #797979;
  16. }
  17. p {
  18.     font-size: 15px;
  19.     background: #797979;
  20.     padding: 10px;
  21.     border-radius: 5px;
  22.     color: white;
  23.     line-height: 2;
  24. }
  25. a {
  26.     color: #FFD200;
  27. }
  28. .box {
  29.     background-color: white;
  30.     margin: 0 0 55px;
  31.     display: flex;
  33. }
  34. .box-tall {
  35.     height: 800px;
  36. }
  37. .box-item {
  38.     width: 200px;
  39.     height: 200px;
  40.     line-height: 200px;
  41.     vertical-align: middle;
  42.     margin: 5px;
  43.     background-color: #ffd200;
  44.     font-size: 100px;
  45.     color: white;
  46.     text-align: center;
  47. }
  48. .item-tall {
  49.     height: 400px;
  50.     line-height: 400px;
  51. }
  54. .box-1 {
  55.     flex-direction: row;
  56. }
  58. .box-2 {
  59.     flex-direction: row;
  60.     flex-wrap: nowrap;
  61. }
  63. .box-3 {
  64.     flex-direction: row;
  65.     flex-wrap: wrap;
  66. }
  68. .box-4 {
  69.     flex-direction: row;
  70.     flex-wrap: wrap-reverse;
  71. }
  73. .box-5 {
  74.     flex-flow: row nowrap;
  75. }
  77. .box-6 {
  78.     justify-content: flex-start;
  79. }
  80. .box-7 {
  81.     justify-content: flex-end;
  82. }
  83. .box-8 {
  84.     justify-content: center;
  85. }
  86. .box-9 {
  87.     justify-content: space-between;
  88. }
  89. .box-10 {
  90.     justify-content: space-around;
  91. }
  93. .box-11 {
  94.     align-items: flex-start;
  95. }
  96. .box-12 {
  97.     align-items: flex-end;
  98. }
  99. .box-13 {
  100.     align-items: center;
  101. }
  102. .box-14 {
  103.     align-items: baseline;
  104. }
  105. .box-14 .box-item{
  106.     font-size: 88px;
  107.     line-height: initial;
  108.     text-decoration: underline;
  109. }
  110. .box-14 .item-tall{
  111.     font-size: 122px;
  112.     line-height: initial;
  113. }
  114. .box-15 {
  115.     align-items: stretch;
  116. }
  117. .box-15 .box-item {
  118.     height: auto;
  119. }
  121. .box-16 {
  122.     flex-wrap: wrap;
  123.     align-content: flex-start;
  124. }
  125. .box-17 {
  126.     flex-wrap: wrap;
  127.     align-content: flex-end;
  128. }
  129. .box-18 {
  130.     flex-wrap: wrap;
  131.     align-content: center;
  132. }
  133. .box-19 {
  134.     flex-wrap: wrap;
  135.     align-content: space-between
  136. }
  137. .box-20 {
  138.     flex-wrap: wrap;
  139.     align-content: space-around;
  140. }
  141. .box-21 {
  142.     flex-wrap: wrap;
  143.     align-content: stretch;
  144. }
  145. .box-21 .box-item {
  146.     height: auto;
  147. }
  149. .box-22 .order {
  150.     order: -1;
  151. }
  152. .box-item div{
  153.     font-size: 14px;
  154.     position: relative;
  155.     top: -150px;
  156. }
  158. .box-23 .box-item{
  159.     flex-grow: 1;
  160.     width: auto;
  161. }
  162. .box-23    .grow-2 {
  163.     flex-grow: 2;
  164. }
  166. .box-24 .box-item {
  167.     width: 400px;
  168. }
  169. .box-24 .shrink{
  170.     flex-shrink: 0;
  171. }
  173. .box-25 .box-item {
  174.     flex-basis: 200px;
  175.     width: 400px; // width 将失去作用
  176. }
  178. .box-26 {
  179.     height: 400px;
  180. }
  181. .box-26 .box-item {
  182.     align-self: flex-start;
  183. }
  184. .box-26 .end {
  185.     align-self: flex-end;
  186. }