在 Bootstrap 5 中使用 Flex 制作简单的网站布局时出现问题答案

【问题标题】：Problems making a simple website-layout with Flex in Bootstrap 5在 Bootstrap 5 中使用 Flex 制作简单的网站布局时出现问题
【发布时间】：2021-09-13 19:22:29
【问题描述】：

我是 Bootstrap 和网络开发的新手，想设计一个简单的欢迎页面，应该如下所示：

颜色显示可以放置弹性行的位置。第二行应具有所需的高度。第一行应填充剩余的高度。中间的文字应垂直和水平居中，右下角的文字应向右居中。

我已阅读 bootstrap 5 中有关 flex 的完整文档，但很难将所有可能性结合起来。

请帮帮我。

【问题讨论】：

标签： html css flexbox bootstrap-5

【解决方案1】：

在正文中添加min-vh-100。这将确保主体至少与视口一样高。
通过添加 d-flex 将 Flexbox 添加到正文
要让 Flexbox 中的元素相互对齐，您还可以添加 flex-column 以将默认的 flex-direction 从行更改为列
要使用弹性容器中弹性项目的所有剩余高度，您必须将flex-grow-1 添加到该元素。
要水平和垂直居中元素，您需要使用 flexbox 以及 d-flex。为了保持正常的块级行为，您还应该使用flex-column。要水平居中（在本例中为侧轴），请使用 align-items-center，要垂直居中（在本例中为主轴），请使用 justify-content-center

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


<!-- Body -->
<body class="min-vh-100 d-flex flex-column">
  <main class="flex-grow-1 bg-danger d-flex flex-column align-items-center justify-content-center">
    <h1>WELCOME</h1>
    <p>to this test</p>
  </main>
  <footer class="bg-info">footer</footer>
</body>

我个人强烈建议您不要使用 Bootstrap 或任何其他库来学习编程网站。学习普通的 CSS。如果您能够使用 flexbox 实现该设计并且知道 flexbox 如何与普通 CSS 一起工作，那么您可以更轻松地搜索正确的 Bootstrap 类。如果您想成为一名高效的 Web 开发人员，您需要学习基本的基础知识并了解编程的工作原理。 Bootstrap 可以让事情变得更简单，但不能替代学习基础知识。

【讨论】：

【解决方案2】：

使用标准 CSS 实现该布局非常简单。

html,
body {
  height: 100%;
  margin: 0;
}

#page {
  background-color: #ff6666;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 100%;
}

main {
  place-self: center; /* horizontal and vertical centering */
}

footer {
  background-color: #6666ff;
  text-align: right;
}

<div id="page">
  <main>
    <h1>Welcome</h1>
  </main>
  <footer>
    &copy; 2021 whatever
  </footer>
</div>

【讨论】：