您如何填充一行 flex 子项中的水平空间？

【问题标题】：How do you fill the horizontal space in a line of flex children?您如何填充一行 flex 子项中的水平空间？
【发布时间】：2014-11-20 22:13:21
【问题描述】：

.flex {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
}

<div class="flex">
  <div class="child">
    <svg></svg>1
  </div>
  <div class="child">
    <svg></svg>2
  </div>
  <div class="child">
    <svg></svg>3
  </div>
</div>

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

【问题讨论】：

标签： html css svg flexbox

【解决方案1】：

您只需在每个 flex-item 上设置 flex-grow 即可，在您的情况下是孩子的 css。像这样：

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

完整示例：（父组件需要显示：flex，我去掉了不相关的wrap和justify-content）

 <!DOCTYPE html>
    <html>
    <head>
    <style>
    body {background-color: powderblue;}
    h1   {color: blue;}
    .flex {
        display: flex;  
    }
    .child {
        background: orange;
        height: 50px;
        border: 1px blue dashed;
    
        flex-grow: 1;
    }
    </style>
    </head>
    <body>
        <h1>How to fill horizontal space in line of flex children</h1>
        <div class="flex">
            <div class="child">
              <svg>
            </div>
            <div class="child">
              <svg>
            </div>
            <div class="child">
              <svg>
            </div>
          </div>
    </body>
    </html>

【讨论】：