我试图将页面分成4个相等的正方形和 centered 内容 . 我遇到的问题是由于.flex-item div具有视口高度而使内容居中,我正在寻找一个完整的flexbox解决方案,谢谢 .
我从资源中尝试了以下内容:
证明内容中心
对齐项目中心
.flex-container {
display: -webkit-flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
.color_1 {
background: tomato;
}
.color_2 {
background: LightGreen;
}
.color_3 {
background: PowderBlue;
}
.color_4 {
background: SteelBlue;
}
.flex-item {
-webkit-flex: 1 0 auto;
flex: 1 0 auto;
width: 50%;
height: 50vh;
}
<div class="flex-container">
<div class="flex-item color_1"><div class="inner"><p>inner</p></div></div>
<div class="flex-item color_2"><div class="inner"><p>inner</p></div></div>
<div class="flex-item color_3"><div class="inner"><p>inner</p></div></div>
<div class="flex-item color_4"><div class="inner"><p>inner</p></div></div>
</div>
1 回答
使
.flex-item
成为flex容器,并使用justify-content和align-items来集中其内容: