引导程序中的 Flexbox 实用程序和示例

介绍

Flexbox 是一种用于布局的 CSS 技术，旨在简化对复杂布局的管理。Bootstrap 提供了一些实用程序和示例来使用 Flexbox 进行更方便的布局。

实用程序

d-flex

该实用程序可以使一个元素设置为 Flex 容器。它可以用于一个单独的元素或一个父元素。在父元素中使用它可以使所有子元素成为 Flex 元素。

<div class="d-flex"></div>

flex-row

该实用程序可以将一个 Flex 容器中的子元素水平排列。它还可以与其他的 Flexbox 实用程序一起使用，如 justify-content-center 或 align-items-end。

<div class="d-flex flex-row"></div>

flex-column

该实用程序可以将一个 Flex 容器中的子元素垂直排列。

<div class="d-flex flex-column"></div>

flex-wrap

该实用程序可以使 Flex 元素在一行中自动换行。

<div class="d-flex flex-wrap"></div>

justify-content-*

该实用程序可以将 Flex 元素在其容器中水平对齐。* 应该被替换为以下值之一：

• start
• end
• center
• between
• around

<div class="d-flex justify-content-center"></div>

align-items-*

该实用程序可以将 Flex 元素在其容器中垂直对齐。* 应该被替换为以下值之一：

• start
• end
• center
• baseline
• stretch

<div class="d-flex align-items-center"></div>

align-self-*

该实用程序可以将单个 Flex 元素在其容器中垂直对齐。* 应该被替换为以下值之一：

• start
• end
• center
• baseline
• stretch

<div class="d-flex align-self-center"></div>

示例

水平居中

<div class="d-flex justify-content-center">
  <div>这个元素将水平居中。</div>
</div>

垂直居中

<div class="d-flex align-items-center">
  <div>这个元素将垂直居中。</div>
</div>

等间距

<div class="d-flex justify-content-between">
  <div>这是一个元素。</div>
  <div>这是另一个元素。</div>
  <div>这是最后一个元素。</div>
</div>

自动换行

<div class="d-flex flex-wrap">
  <div>这是一个元素。</div>
  <div>这是另一个元素。</div>
  <div>这是最后一个元素。</div>
</div>

按钮组

<div class="d-flex flex-row">
  <button class="btn btn-primary">按钮1</button>
  <button class="btn btn-primary">按钮2</button>
  <button class="btn btn-primary">按钮3</button>
</div>

总结

Flexbox 实用程序使布局变得更加简单和方便，同时提高了可读性。使用这些实用程序时，不要忘记检查浏览器兼容性。