Flexbox列方向相同的寬度

Question

如何使帶有列方向子級的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的寬度相同，不應為固定寬度。

Answer 1

寬度的均等化是通過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> 

Answer 2

.block {
display: table;
flex-direction: column;
align-items: center;
}

https://jsfiddle.net/1mz9f8p0/1/