拼图开发文档

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样式,使弹性项目反方向显示。

弹性项目1
弹性项目2
弹性项目3
弹性项目1
弹性项目2
弹性项目3
    <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>
  

列反向

弹性项目1
弹性项目2
弹性项目3
弹性项目1
弹性项目2
弹性项目3
    <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时,溢出的弹性项目则换行显示。

弹性项目1
弹性项目2
弹性项目3
弹性项目1
弹性项目2
弹性项目3
弹性项目1
弹性项目2
弹性项目3

弹性项目1
弹性项目2
弹性项目3
    <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>
  

反向换行

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

弹性项目1
弹性项目2
弹性项目3
弹性项目1
弹性项目2
弹性项目3
    <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定义主轴的对齐方式;主轴为水平方向时,则从左到右对齐;主轴为垂直方向时,则从上到下对齐。

弹性项目1
弹性项目2
弹性项目3
弹性项目1
弹性项目2
弹性项目3
弹性项目1
弹性项目2
弹性项目3
弹性项目1
弹性项目2
弹性项目3
弹性项目1
弹性项目2
弹性项目3
    <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定义交叉轴的对齐方式;交叉轴为垂直方向时,则从上到下对齐;交叉轴为水平方向时,则从左到右对齐。

弹性项目1
弹性项目2
弹性项目3
弹性项目1
弹性项目2
弹性项目3
弹性项目1
弹性项目2
弹性项目3
弹性项目1
弹性项目2
弹性项目3
弹性项目1
弹性项目2
弹性项目3
    <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定义项目的对齐方式。

弹性项目1
弹性项目2
弹性项目3
弹性项目1
弹性项目2
弹性项目3
弹性项目1
弹性项目2
弹性项目3
弹性项目1
弹性项目2
弹性项目3
弹性项目1
弹性项目2
弹性项目3
    <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>