如何使具有列方向子项的 Flexbox 具有相同的宽度。
JSFiddle 示例: https://jsfiddle.net/6ynofan5/
<div class="block">
<div class="title">Some dummy text here, huh</div>
<div class="info">
<div class="text">1</div>
<div class="text">2</div>
<div class="text">3</div>
</div>
</div>
.block {
display: flex;
flex-direction: column;
align-items: center;
}
.block .title {
font-size: 30px;
}
.block .info {
display: flex;
justify-content: space-between;
}
带有.info类的Div应该与.title的宽度相同,不应该有固定宽度。
最佳答案
宽度均衡由align-items
管理,默认值为stretch
。在本例中,您已经覆盖了它,因此需要一个包装器。
然后两个内部 div 就可以是它们自然的 100% 宽度。
.block {
display: flex;
flex-direction: column;
border: 1px solid grey;
justify-content: center;
align-items: center;
}
.title {
font-size: 30px;
background: lightblue;
}
.info {
display: flex;
justify-content: space-between;
background: plum;
}
<div class="block">
<div class="wrap">
<div class="title">Some dummy text here, huh</div>
<div class="info">
<div class="text">1</div>
<div class="text">2</div>
<div class="text">3</div>
</div>
</div>
</div>
关于html - Flexbox列方向同宽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34993826/