Flexbox的利潤率造成溢出

Question

我有那麼Flexbox四溢的小問題：

HTML

<div class="first"> 
      <div class="child"></div> 
      <div class="child"></div> 
      <div class="child"></div> 
</div> 

CSS

* { 
    box-sizing: border-box; 
} 

body { 
    margin: 50px; 
} 
.first { 
    display: flex; 
    flex-flow: row nowrap; 
} 

.child { 
    background: red; 
    border: 1px blue solid; 
    height: 10px; 
    flex: 0 0 33.3%; 

    margin-right: 10px; 
} 

.first :last-child { 
    flex: 0 0 33.4%; 
} 

的問題是，最後一個孩子滿溢，爲什麼？我用框大小來邊框？

Answer 1

如何增加孩子之間的餘量，而不會導致溢出

我想這是你正在嘗試做的：

* { 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    margin: 50px; 
 
} 
 

 
.first { 
 
    display: flex; 
 
    flex-flow: row nowrap; 
 
    border:1px solid green; 
 
} 
 

 
.child { 
 
    background: red; 
 
    border: 1px blue solid; 
 
    height: 10px; 
 
    flex: 1; /* equal widths */ 
 
    margin-right: 10px; 
 
} 
 
.first :last-child { 
 
    margin-right: 0; 
 
}

<div class="first"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
</div>

或者，您也可以使用calc在flex-con上設置子寬度和justify-content:space-between TAINER

* { 
 
    box-sizing: border-box; 
 
} 
 
body { 
 
    margin: 50px; 
 
} 
 
.first { 
 
    display: flex; 
 
    flex-flow: row nowrap; 
 
    border: 1px solid green; 
 
    justify-content: space-between; 
 
} 
 
.child { 
 
    background: red; 
 
    border: 1px blue solid; 
 
    height: 10px; 
 
    width: calc((100% - 20px)/3); 
 
    /* or */ 
 
    flex: 0 0 calc((100% - 20px)/3); 
 
}

<div class="first"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
</div>