Bootstrap 4 Flex学习笔记

Bootstrap 4 中的 Flexbox 是一种强大的布局模型，它可以轻松地使您的网站响应式，并使用灵活的网格系统来创建现代的 Web 设计。以下是 Bootstrap 4 Flex 的一些关键概念和实例代码：

Flex 布局基础概念

1. Flex 容器：一个包含 Flex 项目的容器。
2. Flex 项目：Flex 容器中的每一个子元素称为 Flex 项目。
3. Flex 方向：指定 Flex 容器中 Flex 项目的排列方向，可以是水平或垂直方向。
4. Flex 对齐方式：控制 Flex 项目在 Flex 容器中的对齐方式。

实例代码

创建一个 Flex 容器

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

水平排列 Flex 项目

htmlCopy Code
<div class="d-flex justify-content-between">
  <div>项目1</div>
  <div>项目2</div>
  <div>项目3</div>
</div>

垂直排列 Flex 项目

htmlCopy Code
<div class="d-flex flex-column">
  <div>项目1</div>
  <div>项目2</div>
  <div>项目3</div>
</div>

控制单个 Flex 项目的宽度

htmlCopy Code
<div class="d-flex">
  <div class="flex-fill">占满剩余空间的项目</div>
  <div class="flex-shrink-0">不收缩的固定宽度项目</div>
</div>

以上是 Bootstrap 4 Flex 的一些基础概念和实例代码，通过这些实例可以更好地理解和掌握 Flexbox 布局。