/ flex

Flex

传统布局解决方案

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

<div class="col-xs-2">
     <button id="export-btn" class="btn btn-primary">计算</button>
</div>

配合 Bootrap3 使用,让容器内的元素水平居中:

<div class="row" style="display: flex;">
  <div class="col-xs-2" style="display: flex;justify-content: center;">
       <button id="export-btn" class="btn btn-primary">计算</button>
  </div>
  <div class="col-xs-2" style="display: flex;justify-content: center;">
     <button id="export-btn" class="btn btn-primary">计算</button>
  </div>
</div>

让容器中的按钮垂直居中就很困难。

Flex 布局

2009年,W3C提出了一种新的方案——Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。

Flex布局将成为未来布局的首选方案。

Flex布局是什么?

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

.box {
  display: flex;
}

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

.box{
  display: inline-flex;
}

注意 :设为 Flex 布局以后,子元素的 floatclearvertical-align 属性将失效。

Flex 相关概念

  • 容器,display: flex 的元素称为 Flex 容器,通常都是在 div 上添加该属性。
  • 容器成员,Flex 容器的所有子元素自动称为容器成员(flex item)
  • 容器成员默认从左到右排序
  • 轴,容器默认存在两根轴:水平的主轴(main axis) 和交叉轴(cross axis)。
    • 主轴的开始位置叫 main start,结束位置叫做 main end
    • 交叉轴的开始位置叫做 cross start ,结束位置叫做 cross end

容器的属性

flex-direction 主轴方向

  • row 水平排列(默认值)
  • row-reverse 水平排列,反向
  • column 垂直排列
  • column-reverse 垂直排列,反向

flex-wrap 是否换行

  • nowrap (默认)不换行
  • wrap 换行
  • wrap-reverse 换行,反向

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

justify-content 属性定义了成员在主轴上的对齐方式。

  • flex-start:左对齐(默认值)
  • flex-end:右对齐
  • center:居中
  • space-between:两端对齐,项目之间的间隔都相等。
  • space-around:每个项目两侧的间隔相等。

align-items 属性定义了项目在交叉轴上的对齐方式。

  • flex-start:交叉轴起点对齐
  • flex-end:交叉轴终点对齐
  • center:交叉轴终点对齐
  • baseline:项目的第一行文字对齐
  • stretch:如果容器成员未设置高度或设为auto,将占满整个容器的高度。

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

容器成员的属性

  • flex-grow 1放大;0不放大;默认为0,不放大;
  • flex-shrink 1收缩,0不收缩;默认为1,收缩;
  • flex-basis 属性定义了在分配多余空间之前,成员占据的主轴空间,默认值为auto
  • order 定义成员排列顺序。数值越小,排列越靠前,默认0。
  • flexflex-grow,flex-shrinkflex-basis的简写。默认值为0 1 auto,即"不放大,可缩小,主轴空间自动分配"。
  • align-self 允许单个成员覆盖容器定义的交叉轴的样式。
    • auto
    • flex-start
    • flex-end
    • center
    • baseline
    • stretch

补充

对搜索引擎的快照,对 flex 布局支持不是很友好。实际使用中,百度、360的快照中,flex 布局都会散乱。

布局应用

@media (min-width: 960px) {
  .container {
    display: flex;
    flex-wrap: wrap;
    .card {
      margin: 20px;
      width: calc(50% - 40px);//两列
    }
  }
}
@media (min-width: 1200px) {
  .card {
    width: calc(33% - 40px);//三列
  }
}

注意,我们使用的是 min-width,我们使用的是 min-width,我们使用的是 min-width