如何填充一系列柔性儿童的水平空间？

Question

direction: row
wrap: nowrap
justify-content: space-around

<div class="flex">
  <div class="child">
    <svg>
  </div>
  <div class="child">
    <svg>
  </div>
  <div class="child">
    <svg>
  </div>
</div>

目前子div的宽度由svg的大小决定。我希望他们占用行中所有可用的空间，这样有三个div，每个占用33％的宽度。我可以用flexbox这样做吗？

Answer 1

您可以通过在每个弹性项目上设置 flex-grow 来实现此目的，在您的案例中为子级，css。像这样：

.child{
    background: lightblue;
    flex-grow: 1;
}