如何让每个flexbox填满一行

Question

这就是我想要实现的目标：

我希望每个孩子都能自己填一行。这是我的代码：

{{1}}

实际工作的一件事是删除整个主要部分，这是一个选项。只是好奇，看看是否有更好的解决方案，因为我觉得remvoing主要是有点奇怪。感谢任何帮助！

Answer 1

Michael Coker在评论中说：你不一定需要flexbox，因为默认情况下块级元素会显示在彼此之下：

.container > div {
  margin: 1em;
  padding: 1em;
  text-align: center;
  background: lightblue;
  color: darkblue;
}

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

无论如何，如果由于某种原因需要使用flexbox，可以在容器元素上使用flex-direction: column;：

.container {
  display: flex;
  flex-direction: column;
}
.container > div {
  margin: 1em;
  padding: 1em;
  text-align: center;
  background: lightblue;
  color: darkblue;
}

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