Question

如何使我的带有列方向儿童的弹箱具有相同的宽度。

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％宽度。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

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

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

Flexbox列方向相同宽度

2 个答案: