html - 如何让每个 flexbox 填满一行

Question

这就是我要实现的目标:

我希望每个 child 自己填一行。这是我的代码:

main {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
}



.first {
    background: #999999;
    flex-grow: 1;
    order: 1;
    margin: 20px;
    color: white;
    font-family: Arial, Helvetica, sans-serif; 

}


.second {
    background: #999999;
    flex-grow: 1;
    order: 3;
    margin: 20px;
    color: white;
    font-family: Arial, Helvetica, sans-serif; 

}





.third {
    background: #999999;
    flex-grow: 1;
    order: 3;
    margin: 20px;
    color: white;
    font-family: Arial, Helvetica, sans-serif; 

}



.fourth {
    background: #999999;
    flex-grow: 1;
    order: 3;
    margin: 20px;
    color: white;
    font-family: Arial, Helvetica, sans-serif; 

}



.first,.second,.third,.fourth{
    margin: 20px 20px;
    border-style: solid;
    border-color: black;
    border-width:  5px 5px 5px 5px;

确实有效的一件事是删除整个主线程，因此这是一个选项。只是想看看是否有更好的解决方案，因为我觉得删除 main 有点奇怪。感谢任何帮助!

Answer 1

正如 Michael Coker 在评论中所说:您不一定需要 flexbox，因为默认情况下， block 级元素将显示在彼此下方:

.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>