Bootstrap Flexbox(灵活盒子)



  • 定义和使用

    Bootstrap 3Bootstrap 4 之间的最大区别在于,Bootstrap 4 现在使用 flexbox 而不是 float 来处理布局。
    灵活的盒子布局模块,可以更轻松地设计灵活的响应式布局结构,而无需使用浮动或定位。 如果您不熟悉 Flex,可以在我们的 CSS Flexbox 教程中阅读有关它的信息。
    要创建 Flexbox 容器并将直接子级转换为 flex 项,请使用 .d-flex 类:
    <div class="d-flex p-3 bg-secondary text-white">
      <div class="p-2 bg-info">Flex item 1</div>
      <div class="p-2 bg-warning">Flex item 2</div>
      <div class="p-2 bg-primary">Flex item 3</div>
    </div>
    
    
    尝试一下
    输出结果如下:
    Flex item 1
    Flex item 2
    Flex item 3
    要创建内联 Flexbox 容器,请使用 .d-inline-flex 类:
    <div class="d-inline-flex p-3 bg-secondary text-white">
      <div class="p-2 bg-info">Flex item 1</div>
      <div class="p-2 bg-warning">Flex item 2</div>
      <div class="p-2 bg-primary">Flex item 3</div>
    </div>
    
    
    尝试一下
    输出结果如下:
    Flex item 1
    Flex item 2
    Flex item 3
    注意:IE9和更早版本不支持 Flexbox。
    如果需要IE8-9支持,请使用 Bootstrap3。Bootstrap3是Bootstrap的最稳定的版本,团队仍然支持它进行重要的错误修正和文档更改。 但是,不会添加任何新功能。
  • 水平和垂直方向

    使用 .flex-row 可以水平(并排)显示弹性项目;这是默认值。
    提示:使用 .flex-row-reverse 可以将水平方向右对齐:
    <div class="d-flex flex-row bg-secondary mb-1">
      <div class="p-2 bg-info">Flex item 1</div>
      <div class="p-2 bg-warning">Flex item 2</div>
      <div class="p-2 bg-primary">Flex item 3</div>
    </div>
    
    <div class="d-flex flex-row-reverse bg-secondary">
      <div class="p-2 bg-info">Flex item 1</div>
      <div class="p-2 bg-warning">Flex item 2</div>
      <div class="p-2 bg-primary">Flex item 3</div>
    </div>
    
    
    尝试一下
    输出结果如下:
    Flex item 1
    Flex item 2
    Flex item 3
    Flex item 1
    Flex item 2
    Flex item 3
    使用 .flex-column 垂直显示弹性项目(彼此顶部),或使用 .flex-column-reverse 反转垂直方向:
      <div class="d-flex flex-column mb-1">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
      </div>
      
      <div class="d-flex flex-column-reverse">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
      </div>
    
    
    尝试一下
    输出结果如下:
    Flex item 1
    Flex item 2
    Flex item 3
    Flex item 1
    Flex item 2
    Flex item 3
  • Justify Content 属性

    使用 .justify-content- * 类更改弹性项目的对齐方式;有效的类是开始(默认),结束,中心,之间或周围的类:
    <div class="d-flex justify-content-start mb-1">...</div>
    <div class="d-flex justify-content-end mb-1">...</div>
    <div class="d-flex justify-content-center mb-1">...</div>
    <div class="d-flex justify-content-between mb-1">...</div>
    <div class="d-flex justify-content-around mb-1">...</div>
    
    
    尝试一下
    输出结果如下:
    Flex item 1
    Flex item 2
    Flex item 3
    Flex item 1
    Flex item 2
    Flex item 3
    Flex item 1
    Flex item 2
    Flex item 3
    Flex item 1
    Flex item 2
    Flex item 3
    Flex item 1
    Flex item 2
    Flex item 3
  • 填充/等宽

    在弹性项目上使用 .flex-fill 强制它们相等的宽度:
    <div class="d-flex">
      <div class="p-2 bg-info flex-fill">Flex item 1</div>
      <div class="p-2 bg-warning flex-fill">Flex item 2</div>
      <div class="p-2 bg-primary flex-fill">Flex item 3</div>
    </div>
    
    
    尝试一下
    输出结果如下:
    Flex item 1
    Flex item 2
    Flex item 3
    在弹性项目上使用 .flex-grow-1 可以占用其余空间;在下面的示例中,前两个 flex 项占用其必要的空间,而最后一个 flex 项占用剩余的可用空间:
    <div class="d-flex">
      <div class="p-2 bg-info">Flex item 1</div>
      <div class="p-2 bg-warning">Flex item 2</div>
      <div class="p-2 bg-primary flex-grow-1">Flex item 3</div>
    </div>
    
    
    尝试一下
    提示:在弹性项目上使用 .flex-shrink-1可以在必要时使其收缩。
    输出结果如下:
    Flex item 1
    Flex item 2
    Flex item 3
    使用 .order 类更改特定弹性商品的视觉顺序。 有效的类是从0到12,其中最小的数字具有最高的优先级(order-1在order-2之前显示,依此类推。):
    <div class="d-flex bg-secondary">
      <div class="p-2 bg-info order-3">Flex item 1</div>
      <div class="p-2 bg-warning order-2">Flex item 2</div>
      <div class="p-2 bg-primary order-1">Flex item 3</div>
    </div>
    
    
    尝试一下
    使用 .mr-auto(向右推项目)或使用 .ml-auto(向左推项目)轻松添加自动边距以伸缩项目:
    <div class="d-flex bg-secondary mb-1">
      <div class="p-2 mr-auto bg-info">Flex item 1</div>
      <div class="p-2 bg-warning">Flex item 2</div>
      <div class="p-2 bg-primary">Flex item 3</div>
    </div>
    <div class="d-flex bg-secondary">
      <div class="p-2 bg-info">Flex item 1</div>
      <div class="p-2 bg-warning">Flex item 2</div>
      <div class="p-2 ml-auto bg-primary">Flex item 3</div>
    </div>
    
    
    尝试一下
    输出结果如下:
    Flex item 1
    Flex item 2
    Flex item 3
    Flex item 1
    Flex item 2
    Flex item 3
  • Wrap 包裹

    使用 .flex-nowrap(默认)、.flex-wrap.flex-wrap-reverse 控制弹性项目如何包装在弹性容器中。
    <div class="d-flex flex-wrap">...</div>
    <div class="d-flex flex-wrap-reverse">...</div>
    <div class="d-flex flex-nowrap">...</div>
    
    
    尝试一下
    通过更改上面示例框中的弹性项目的包装,单击下面的按钮以查看三个类之间的区别:
    输出结果
    Flex item 1
    Flex item 2
    Flex item 3
    Flex item 4
    Flex item 5
    Flex item 6
    Flex item 7
    Flex item 8
    Flex item 9
    Flex item 10
    Flex item 11
    Flex item 12
    Flex item 13
    Flex item 14
    Flex item 15
  • 对齐方式

    使用 .align-content- * 类控制收集的弹性项目的垂直对齐方式。
    有效的类是 .align-content-start(默认)、.align-content-end.align-content-center.align-content-between.align-content-around.align-content-stretch
    <div class="d-flex flex-wrap align-content-start">...</div>
    <div class="d-flex flex-wrap align-content-end">...</div>
    <div class="d-flex flex-wrap align-content-center">...</div>
    <div class="d-flex flex-wrap align-content-around">...</div>
    <div class="d-flex flex-wrap align-content-stretch">...</div>
    
    
    尝试一下
    使用 .align-items- * 类控制弹性项目的单行的垂直对齐方式。
    有效的类是 .align-items-start.align-items-end.align-items-center.align-items-baseline.align-items-stretch(默认)。
    <div class="d-flex align-items-start">...</div>
    <div class="d-flex align-items-end">...</div>
    <div class="d-flex align-items-center">...</div>
    <div class="d-flex align-items-baseline">...</div>
    <div class="d-flex align-items-stretch">...</div>
    
    
    尝试一下
    使用 .align-self- * 类控制指定弹性项目的垂直对齐方式。
    有效的类是 .align-self-start.align-self-end.align-self-center.align-self-baseline.align-self-stretch(默认)。
    <div class="d-flex bg-light" style="height:150px">
      <div class="p-2 border">Flex item 1</div>
      <div class="p-2 border align-self-start">Flex item 2</div>
      <div class="p-2 border">Flex item 3</div>
    </div>
    
    
    尝试一下
    了解有关更多flex的类知识,请参考我们的 Bootstrap CSS类参考