我有一个带有 display: flex; 的 div flex 方向:行;
。除非我指定 align-items: center
,否则此 div 的子元素占据全高。下面的代码 -
.row {
display: flex;
flex-direction: row;
width: 100%;
height: 100px;
background: beige;
border: 1px solid red;
margin: 10px 0;
}
.row2 {
align-items: center;
}
.row-item {
border: 1px solid green;
}
.item1,
.item3 {
width: 100px;
}
.item2 {
flex: 1;
}
<div class="row row1">
<div class="row-item item1">1</div>
<div class="row-item item2">
<div> 2.1 </div>
<div> 2.2 </div>
</div>
<div class="row-item item3">3</div>
</div>
<div class="row row2">
<div class="row-item item1">1</div>
<div class="row-item item2">
<div> 2.1 </div>
<div> 2.2 </div>
</div>
<div class="row-item item3">3</div>
</div>
我想要实现的是 2.1 和 2.2 应该采用 50px (50%) 高度并且应该使其内容垂直居中对齐。他们还应该水平拉伸(stretch)全部可用空间(例如 width: auto 或 100%)。然后,如果 2.1 不存在,则 2.2 的高度应为 100px,并且应垂直居中对齐。
最佳答案
您需要将行元素设为 flexbox 并对其应用 align-items: center;
这是你应该添加的代码
.row1 .row-item {
display: flex;
align-items: center;
}
查看下面的结果:
.row {
display: flex;
flex-direction: row;
width: 100%;
height: 100px;
background: beige;
border: 1px solid red;
margin: 10px 0;
}
.row2 {
align-items: center;
}
.row-item {
border: 1px solid green;
}
.row1 .row-item {
display: flex;
flex-wrap: wrap;
}
.row1 .row-item div {
width: 100%;
border: 1px solid blue;
display: flex;
align-items: center;
}
.item1,
.item3 {
width: 100px;
}
.item2 {
flex: 1;
}
<div class="row row1">
<div class="row-item item1">1</div>
<div class="row-item item2">
<div> 2.1 </div>
<div> 2.2 </div>
</div>
<div class="row-item item3">3</div>
</div>
<div class="row row2">
<div class="row-item item1">1</div>
<div class="row-item item2">
<div> 2.1 </div>
<div> 2.2 </div>
</div>
<div class="row-item item3">3</div>
</div>
关于html - 使用 flexbox 对齐元素中心的拉伸(stretch)高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43994975/