Bootstrap5 Flex 学习笔记

什么是 Flexbox?

Flexbox 是一种 CSS 布局模式，它使得容器内的元素能够快速、轻松地对齐、分布和调整大小。传统的 CSS 布局方法如使用浮动和定位会带来很多麻烦。而使用 Flexbox 可以轻松实现响应式布局，使得我们的 Web 应用更加灵活和易于维护。

如何使用 Flexbox?

Flexbox 只需要对容器元素应用布局属性即可实现对子元素进行控制。以下是常见的 Flexbox 属性：

• display: flex: 将容器元素设置为一个 Flex 容器；
• flex-direction: 指定 Flex 布局的主轴方向；
• justify-content: 控制主轴上的对齐方式；
• align-items: 控制垂直于主轴的对齐方式；
• flex-wrap: 控制 Flex 容器如何换行；
• align-content: 当多行项目布局时，控制行之间的对齐方式；
• flex: 指定项目的伸缩性。

下面是一个简单的例子，将三个 div 元素在水平方向上等分，并垂直居中：

htmlCopy Code
<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

cssCopy Code
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.item {
  flex: 1;
}

实例

下面是一个使用 Flexbox 实现响应式导航栏的示例代码：

htmlCopy Code
<nav class="navbar navbar-expand-sm navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

cssCopy Code
.navbar-nav {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

在以上代码中，navbar-nav 类被应用到了 <ul> 元素上，它将元素变成一个 Flex 容器，并将导航栏的链接向右对齐。通过使用 Flexbox，我们可以轻松实现响应式导航栏中的布局和对齐方式。

结语

Flexbox 是一种强大的 CSS 布局模式，它能够帮助我们更加轻松地实现复杂的页面布局。掌握 Flexbox 的基础知识，可以让你在开发 Web 应用时更加得心应手。