以下是一些在 Bootstrap 4 中使用弹性盒的基本概念：
1. 容器（Container）：
在 Bootstrap 4 中，你可以使用 .d-flex 类将一个元素变成弹性容器。例如：
<div class="d-flex">
<!-- 这里的子元素将成为弹性项目 -->
</div>
这会将容器的直接子元素变成弹性项目，使它们在水平方向上排列。
2. 弹性方向（Flex Direction）：
默认情况下，Bootstrap 4 中的弹性容器是水平排列的。你可以通过使用 .flex-column 类将其变成垂直排列：
<div class="d-flex flex-column">
<!-- 这里的子元素将垂直排列 -->
</div>
可以根据需要选择水平排列或垂直排列。
3. 弹性项目（Flex Item）：
在弹性容器中的直接子元素成为弹性项目，你可以使用 .flex-grow-*、.flex-shrink-* 和 .flex-basis-* 等类来调整弹性项目的弹性属性。例如：
<div class="d-flex">
<div class="flex-grow-1">Flex item 1</div>
<div class="flex-shrink-1">Flex item 2</div>
</div>
这里，flex-grow-1 类表示该弹性项目可以在剩余的空间中扩展，而 flex-shrink-1 类表示该弹性项目可以在空间不足时收缩。
4. 水平和垂直居中：
使用 .justify-content-* 类可以调整弹性容器中弹性项目的水平排列方式，使用 .align-items-* 类可以调整弹性项目在垂直方向上的对齐方式。例如：
<div class="d-flex justify-content-center align-items-center">
<!-- 这里的子元素将在水平和垂直方向上居中 -->
</div>
这里，justify-content-center 将子元素水平居中，align-items-center 将子元素垂直居中。
以上只是一些弹性盒的基本概念。Bootstrap 4 还提供了更多的弹性盒工具类，如 .flex-wrap、.align-self 等，可以根据具体需求进行使用。确保查阅 Bootstrap 4 的官方文档以获取更多详细信息：[Bootstrap Flex](https://getbootstrap.com/docs/4.6/utilities/flex/)。
转载请注明出处：http://www.zyzy.cn/article/detail/5480/Bootstrap