如何填充一系列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; 
}