Bootstrap5 Flex布局指南

Bootstrap5 Flex布局指南

Bootstrap 是一个流行的前端框架，它提供了丰富的组件和工具来帮助开发者快速构建响应式网站。在 Bootstrap5 中，Flex 布局得到了进一步的增强和优化，使得开发者可以更加灵活地设计网页布局。本文将详细介绍 Bootstrap5 中的 Flex 布局，包括其基本概念、常用类名、布局技巧以及注意事项。

Flex 布局基本概念

Flex 布局，即弹性盒子布局（Flexible Box Layout），是一种布局方式，允许开发者以更简单的方式实现复杂的布局结构。在 Flex 布局中，容器（flex container）和子项（flex items）是两个关键概念。

• 容器：包含一个或多个子项的元素，通常使用 <div> 标签创建。
• 子项：容器内的元素，可以是任何类型的元素。

Flex 布局的主要特点包括：

• 主轴（Main Axis）：容器的主轴方向，可以是水平或垂直。
• 交叉轴（Cross Axis）：垂直于主轴的轴，即侧轴。
• flex-direction：定义主轴的方向。
• flex-wrap：定义子项是否换行。
• flex-flow：flex-direction 和 flex-wrap 的简写。