如何将页眉、4个框和4个文本项集中在一个Flexbox中

Question

/* stylesheet */
.container {
display: flex;
border: solid;
border-color: blue;
justify-content: center;
align-items: center;
height: 500px;
flex-direction: column;


}
.block {
border: solid;
border-color: mistyrose;
width: 200px;
height: 200px;
font-size: 48px;
text-align: center;

}
.block1 {background-color: olive;}
.block2 {background-color: orangered;}
.block3 {background-color: palegreen;}
.block4 {background-color: royalblue;}
.head {
border: solid;
border-color: mistyrose;
}
.text {
border: solid;
border-color: mistyrose;
}

我很难抓住Flexbox。这更多的是猜测，而不是真正知道我在做什么。CSS技巧网站的备忘单和FlexboxFroggy并不能帮助我理解。

我想在4个框上方居中放置一个页眉，在框下方是4个文本项框和文本项以十字轴为中心，但在主轴上隔开。如果我把flex direction:列放在一起，我可以把它们正确地叠在一起，但我不能把盒子分开。我试着在方框和文本上对齐自己，没有成功。我已经尝试了很多次不同高度组合的弹性包裹，但我一直无法正常工作。我不知道我是需要柔盒里面的柔盒，还是需要玩边距？如此失落。。。

这是我的代码笔：https://codepen.io/ct2k/pen/JjrwaKx

Answer 1

这就是您想要的吗？

/* stylesheet */
.container {
display: flex;
border: solid;
border-color: blue;
justify-content: center;
align-items: center;
height: 500px;
flex-direction: column;
}
.block {
border: solid;
border-color: mistyrose;
width: 100px;
height: 100px;
font-size: 48px;
text-align: center;
}
.block1 {background-color: olive;}
.block2 {background-color: orangered;}
.block3 {background-color: palegreen;}
.block4 {background-color: royalblue;}
.head {
border: solid;
border-color: mistyrose;
}
.text {
border: solid;
border-color: mistyrose;
width:25%;
text-align:center
}
.flex1{
display: flex;
width:400px
}
.flex2{
padding-top: 1rem;
display: flex;
width:400px;
align-item:center;
}

<div class="container">
<h2 class="head">Head</h2>
<div class="flex1">
<div class="block block1">1</div>
<div class="block block2">2</div>
<div class="block block3">3</div>
<div class="block block4">4</div>
</div>
<div class="flex2">
<div class="text">text text1</div>
<div class="text">text text2</div>
<div class="text">text text3</div>
<div class="text">text text4</div>
</div>
</div>