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

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-item上设置flex-grow来实现,在你的情况下是child,css.像这样:

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