我正在尝试将页面拆分为4个相等的正方形,其中居中内容。我遇到的问题是由于.flex-item div具有视口高度而导致内容居中,我正在寻找一个完整的flexbox解决方案,谢谢。
我从资源中尝试了以下内容:
证明内容中心
对齐项目中心
<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>
&#13;
User.find().populate('pets', {type: 'dog'}).exec(err, users) ...
&#13;
答案 0 :(得分:2)
将.flex-item
设为flex容器,并使用justify-content
和align-items
将其内容置于中心位置:
.flex-item {
display: flex;
justify-content: center;
align-items: center;
}
body {
margin: 0;
}
.flex-container {
display: flex;
flex-wrap: wrap;
}
.color_1 {
background: tomato;
}
.color_2 {
background: LightGreen;
}
.color_3 {
background: PowderBlue;
}
.color_4 {
background: SteelBlue;
}
.flex-item {
flex: 1 0 auto;
width: 50%;
height: 50vh;
display: flex;
justify-content: center;
align-items: center;
}
<div class="flex-container">
<div class="flex-item color_1"><div class="inner">inner</div></div>
<div class="flex-item color_2"><div class="inner">inner</div></div>
<div class="flex-item color_3"><div class="inner">inner</div></div>
<div class="flex-item color_4"><div class="inner">inner</div></div>
</div>