如何使用flex使div容器只使用一列

Flex布局是一种现代的CSS布局模型，它可以轻松地创建响应式和动态的布局。要使用Flexbox使一个div容器只使用一列，你需要设置容器的display属性为flex，并且默认情况下，Flex项目会沿着主轴（默认是水平方向）排列。如果你希望子元素在垂直方向上堆叠，即只使用一列，你可以设置主轴的方向为垂直。

以下是如何实现的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Single Column Layout</title>
<style>
  .container {
    display: flex; /* 启用Flex布局 */
    flex-direction: column; /* 设置主轴方向为垂直 */
    height: 100vh; /* 使容器占满整个视口高度 */
  }
  .item {
    margin: 10px; /* 给子元素添加一些外边距 */
  }
</style>
</head>
<body>

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

</body>
</html>

在这个例子中，.container类使用了display: flex来启用Flex布局，并且通过flex-direction: column将主轴方向设置为垂直，这样.item子元素就会在垂直方向上堆叠，形成一列布局。