CSS 使用flexbox使一个div位于另一个div下方

在本文中，我们将介绍如何使用CSS的flexbox布局将一个div放置在另一个div的下方。Flexbox是一种现代的布局方式，可以方便地定位和排列元素。

阅读更多：CSS 教程

理解Flexbox

在使用flexbox之前，首先要理解flex容器和flex项的概念。flex容器是一个包含一组flex项的父元素，而flex项则是容器中的子元素。flex项可以是任何一种HTML元素，例如div、span或者其他。

为了使用flexbox，我们需要将容器的display属性设置为flex。这样，容器内的flex项就会按照一定的规则进行排列。

下面是一个简单的例子，展示如何将一个div放置在另一个div的下方。

<div class="container">
  <div class="div1">div1</div>
  <div class="div2">div2</div>
</div>

.container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.div1 {
  background-color: red;
}

.div2 {
  background-color: blue;
}

在上面的例子中，我们首先创建了一个容器，并将其display属性设置为flex。然后，我们使用flex-direction属性将其子元素按列排列。最后，我们使用align-items属性将子元素在垂直方向上对齐到容器的起始位置。这样，第二个div就会位于第一个div的下方。

示例应用

接下来，我们将通过一个示例来展示如何使用flexbox将一个div放置在另一个div的下方。

<div class="container">
  <div class="div1">div1</div>
  <div class="div2">div2</div>
</div>

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f1f1f1;
  padding: 20px;
}

.div1 {
  background-color: red;
  width: 200px;
  height: 100px;
  margin-bottom: 20px;
}

.div2 {
  background-color: blue;
  width: 200px;
  height: 100px;
}

在这个示例中，我们先定义了一个容器，将其display属性设置为flex，并设置了flex-direction为column，align-items为center，justify-content为center。我们还给容器设置了背景颜色和内边距。

div1和div2分别表示两个子元素，我们给它们设置了背景颜色、宽度、高度和边距。

这样，我们就成功地将div2放置在了div1的下方，并居中对齐。