flex弹性布局

简介

Flex是Flexible Box的缩写，意为"弹性布局"，它给子元素之间提供了强大的空间分布和对齐能力；以便我们能够简便、完整、响应式的实现多种网页布局。

框架用.flex定义弹性布局，为块显示，也可以内联显示.flex-inline。

    <div class="flex">弹性盒子</div>
    <div class="flex-inline">内联弹性盒子</div>
  

轴线

当使用弹性布局时，首先想到的是两根轴线：主轴和交叉轴。主轴由flex-direction定义，另一根轴垂直于它，默认主轴为水平方向，垂直方向为交叉轴；我们使用弹性布局的所有属性都跟这两根轴线有关。

当弹性布局叠加.flex-column为纵向为主轴时(即：flex-direction:column;)，则垂直方向为主轴，水平方向为交叉轴。

为了演示，.flex设置了padding，没有贴着边界，实际应用中为贴着边界显示。

反向

除上面个的两个方向外，还可以叠加.flex-reverse样式，使弹性项目反方向显示。

    <div class="flex">
      <div>弹性项目1</div>
      <div>弹性项目2</div>
      <div>弹性项目3</div>
    </div>

    <div class="flex flex-reverse">
      <div>弹性项目1</div>
      <div>弹性项目2</div>
      <div>弹性项目3</div>
    </div>
  

列反向

    <div class="flex flex-column">
      <div>弹性项目1</div>
      <div>弹性项目2</div>
      <div>弹性项目3</div>
    </div>

    <div class="flex flex-column flex-reverse">
      <div>弹性项目1</div>
      <div>弹性项目2</div>
      <div>弹性项目3</div>
    </div>
  

换行

弹性布局默认为.flex-nowrap在一行内显示，不换行，当叠加.flex-warp时，溢出的弹性项目则换行显示。

    <div class="flex flex-nowrap" style="width:15rem;">
      <div>弹性项目1</div>
      <div>弹性项目2</div>
      <div>弹性项目3</div>
    </div>

    <div class="flex flex-wrap" style="width:15rem;">
      <div>弹性项目1</div>
      <div>弹性项目2</div>
      <div>弹性项目3</div>
    </div>

    <div class="flex flex-column flex-nowrap" style="height:10rem;">
      <div>弹性项目1</div>
      <div>弹性项目2</div>
      <div>弹性项目3</div>
    </div>

    <div class="flex flex-column flex-wrap" style="height:10rem;">
      <div>弹性项目1</div>
      <div>弹性项目2</div>
      <div>弹性项目3</div>
    </div>
  

反向换行

水平方向时，反向换行从下到上顺序，当纵向时，反向换行则从右到左显示。

    <div class="flex flex-wrap-reverse" style="width:15rem;">
      <div>弹性项目1</div>
      <div>弹性项目2</div>
      <div>弹性项目3</div>
    </div>
    <div class="flex flex-column flex-wrap-reverse" style="height:10rem;">
      <div>弹性项目1</div>
      <div>弹性项目2</div>
      <div>弹性项目3</div>
    </div>
  

主轴对齐

框架分别用主轴起点.flex-start、主轴中间.flex-center、主轴终点.flex-end、主轴等比间距.flex-between、主轴均分间距.flex-around定义主轴的对齐方式；主轴为水平方向时，则从左到右对齐；主轴为垂直方向时，则从上到下对齐。

    <div class="flex flex-start">...</div>
    <div class="flex flex-center">...</div>
    <div class="flex flex-end">...</div>
    <div class="flex flex-between">...</div>
    <div class="flex flex-around">...</div>
  

交叉轴对齐

框架分别用交叉轴起点.flex-items-start、交叉轴中间.flex-items-center、交叉轴终点.flex-items-end、交叉轴第一行文字基线.flex-items-baseline、交叉轴方向拉伸.flex-items-stretch定义交叉轴的对齐方式；交叉轴为垂直方向时，则从上到下对齐；交叉轴为水平方向时，则从左到右对齐。

    <div class="flex flex-items-start">...</div>
    <div class="flex flex-items-center">...</div>
    <div class="flex flex-items-end">...</div>
    <div class="flex flex-items-baseline">...</div>
    <div class="flex flex-items-stretch">...</div>
  

项目对齐

项目对齐为单独设置弹性项目的对齐方式，对齐的属性与交叉轴相同，框架分别用起点.flex-self-start、中间.flex-self-center、终点.flex-self-end、第一行文字基线.flex-self-baseline、拉伸.flex-self-stretch定义项目的对齐方式。

    <div class="flex-self-start">...</div>
    <div class="flex-self-center">...</div>
    <div class="flex-self-end">...</div>
    <div class="flex-self-baseline">...</div>
    <div class="flex-self-stretch">...</div>
  

多轴对齐

当弹性项目为换行存在多轴的情况下，可用轴起点.flex-content-start、轴中间.flex-content-center、轴终点.flex-content-end、轴等比间距.flex-content-between、轴均分间距.flex-content-around定义多轴的对齐方式。

    <div class="flex flex-wrap flex-content-start">...</div>
    <div class="flex flex-wrap flex-content-center">...</div>
    <div class="flex flex-wrap flex-content-end">...</div>
    <div class="flex flex-wrap flex-content-between">...</div>
    <div class="flex flex-wrap flex-content-around">...</div>
  

伸缩

当盒子还有空间，在弹性项目上使用.flex-grow，则可以使项目拉伸，填充空间。

    <div class="flex">
      <div>弹性项目</div>
      <div class="flex-grow">弹性项目</div>
      <div>弹性项目</div>
    </div>
  

收缩

收缩由刚好与拉伸相反，即在不换行的情况下，空间不够要溢出时，可用.flex-shrink使项目收缩。

    <div class="flex">
      <div class="w12">弹性项目</div>
      <div class="flex-shrink">弹性项目</div>
    </div>
  

填充

在使用.flex-fill的项目上，实现自动伸缩。

    <div class="flex">
      <div class="flex-fill">这是第一个弹性项目的内容</div>
      <div class="flex-fill">弹性项目</div>
      <div class="flex-fill">弹性项目</div>
    </div>
  

自动边界

使用盒子模型的自动边界样式.margin-位置-auto，可使弹性项目左右自动边界显示。

    <div class="flex">
      <div>弹性项目</div>
      <div class="margin-left-auto">弹性项目</div>
      <div>弹性项目</div>
    </div>
    <div class="flex">
      <div>弹性项目</div>
      <div class="margin-right-auto">弹性项目</div>
      <div>弹性项目</div>
    </div>
    <div class="flex">
      <div>弹性项目</div>
      <div class="margin-center-auto">弹性项目</div>
      <div>弹性项目</div>
    </div>
  

上下自动边界

    <div class="flex flex-column">
      <div>弹性项目</div>
      <div class="margin-top-auto">弹性项目</div>
      <div>弹性项目</div>
    </div>
    <div class="flex">
      <div>弹性项目</div>
      <div class="margin-bottom-auto">弹性项目</div>
      <div>弹性项目</div>
    </div>
    <div class="flex">
      <div>弹性项目</div>
      <div class="margin-middle-auto">弹性项目</div>
      <div>弹性项目</div>
    </div>