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

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项目上设置flex-grow来完成此操作，在您的情况下为child's，css。像这样：

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