在 Bootstrap 4 中，Flexbox（弹性布局） 提供了一种强大且灵活的方法来设计布局，尤其适用于复杂的响应式设计。Flexbox 是一种布局模型，允许你在容器中轻松地排列和对齐元素，而不需要依赖浮动或定位。

1. 基本概念

Flexbox 布局基于两个核心概念：

  • Flex 容器（flex container）：用于设置弹性布局的父元素。
  • Flex 项目（flex items）：容器中的子元素。

通过设置容器的 display 属性为 flex，你可以启用 Flexbox 布局。然后，你可以通过多个类来控制子元素的排列、对齐和尺寸。

2. 启动 Flexbox 布局

要启用 Flexbox，首先需要在容器上使用 d-flex 类，将其设为弹性容器。

示例：基本弹性布局

<div class="d-flex">
  <div class="p-2">Item 1</div>
  <div class="p-2">Item 2</div>
  <div class="p-2">Item 3</div>
</div>

这将创建一个弹性容器，其中包含三个项目。项目将根据容器的宽度自动排列。

3. Flex 容器的对齐

3.1. 对齐项目（Align Items）

Flexbox 允许你垂直对齐项目，通过 align-items 类来控制。

  • .align-items-start：将项目对齐到容器的顶部。
  • .align-items-center：将项目垂直居中对齐。
  • .align-items-end：将项目对齐到容器的底部。
  • .align-items-baseline：将项目对齐到基线。
  • .align-items-stretch：将项目拉伸填满容器（默认）。

示例：

<div class="d-flex align-items-center" style="height: 200px;">
  <div class="p-2">Item 1</div>
  <div class="p-2">Item 2</div>
</div>

在这个例子中，所有项目将在垂直方向上居中对齐。

3.2. 水平对齐项目（Justify Content）

Flexbox 还允许你水平对齐项目，通过 justify-content 类来控制。

  • .justify-content-start：将项目对齐到容器的开始（默认）。
  • .justify-content-center：将项目水平居中对齐。
  • .justify-content-end：将项目对齐到容器的结束。
  • .justify-content-between：项目之间平均分配空间，第一个和最后一个项目分别对齐到容器的两端。
  • .justify-content-around：项目之间平均分配空间，并且每个项目与容器的两端都有相等的间距。

示例：

<div class="d-flex justify-content-between">
  <div class="p-2">Item 1</div>
  <div class="p-2">Item 2</div>
  <div class="p-2">Item 3</div>
</div>

这将使三个项目在容器中水平分布，第一项和最后一项对齐容器的两端，中间项则分配均等的空间。

4. Flex 项目的顺序（Order）

Flexbox 允许你改变项目的排列顺序。每个项目的默认顺序是 0，你可以使用 order 类来调整顺序。

  • .order-* 类可以控制项目的顺序。值从 1 到 12，默认情况下为 0，数字越大顺序越靠后。

示例：

<div class="d-flex">
  <div class="p-2 order-3">Item 1</div>
  <div class="p-2 order-1">Item 2</div>
  <div class="p-2 order-2">Item 3</div>
</div>

在这个例子中，Item 2 将显示在最前面，Item 3 其次，Item 1 最后。

5. Flex 容器的换行（Flex Wrap）

默认情况下，Flex 项目会在一行中排列，但你可以使用 flex-wrap 类让项目在容器的边界处换行。

  • .flex-wrap：允许项目换行。
  • .flex-nowrap：禁止项目换行。
  • .flex-wrap-reverse：反向排列项目。

示例：

<div class="d-flex flex-wrap">
  <div class="p-2">Item 1</div>
  <div class="p-2">Item 2</div>
  <div class="p-2">Item 3</div>
  <div class="p-2">Item 4</div>
</div>

如果容器的宽度不足以容纳所有项目，项目会自动换行。

6. Flex 项目的尺寸（Flex Grow, Shrink, Basis）

Flexbox 允许你定义项目如何在容器中扩展、收缩或占据特定的空间。

  • .flex-grow-*：控制项目如何扩展以填充剩余空间。
  • .flex-shrink-*：控制项目如何收缩以适应容器的大小。
  • .flex-fill：使项目填充容器的剩余空间。
  • .flex-1：等同于 flex-grow: 1 和 flex-shrink: 1，表示项目将平分容器的空间。

示例：

<div class="d-flex">
  <div class="p-2 flex-fill">Item 1</div>
  <div class="p-2 flex-fill">Item 2</div>
  <div class="p-2 flex-fill">Item 3</div>
</div>

所有三个项目会平分容器的宽度，并占据所有可用空间。

7. 响应式 Flexbox 布局

Bootstrap 4 提供了响应式的 Flexbox 布局类，让你可以针对不同的屏幕大小调整布局。

  • d-*：使用 d-flex 类来控制不同屏幕尺寸下的布局，d-sm-flex, d-md-flex, d-lg-flex, d-xl-flex 等。

示例：

<div class="d-none d-md-flex">
  <div class="p-2">Item 1</div>
  <div class="p-2">Item 2</div>
</div>

在这个例子中，Flexbox 布局只有在中等或更大屏幕尺寸上才会生效。

总结

Bootstrap 4 的 Flexbox 布局是一个非常强大的工具，能够帮助你灵活地控制元素的排列和对齐。通过简单的类，你可以设置容器为弹性布局，控制项目的对齐、顺序、尺寸和换行，甚至能在响应式设计中灵活地调整布局。

常用的 Flexbox 类包括：

  • d-flex：启用弹性布局
  • align-items-*：垂直对齐
  • justify-content-*：水平对齐
  • order-*：设置项目顺序
  • flex-wrap：控制换行
  • flex-fill、flex-grow、flex-shrink：控制项目的大小和扩展行为

通过结合这些类，你可以创建灵活、响应式的布局，满足各种设计需求。