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>