相同寬度的flex項目除了最後一個

我想要有一個三列布局，其中每個div都可以放入容器的1/3內，除了最後一個項目（跨越其餘列）。相同寬度的flex項目除了最後一個

我在這裏有一個工作示例：https://codepen.io/anon/pen/vZYLjY我期待讓每個灰色框具有相同的寬度，並將藍色框展開以填充剩餘空間的其餘部分。

.parent { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
} 
 

 
.child { 
 
    flex: 1 0 30%; 
 
} 
 

 
.parent { 
 
    border: 5px solid #EEEEEE; 
 
    padding: 5px; 
 
    margin: 30px 0; 
 
} 
 

 
.child { 
 
    background-color: #CCCCCC; 
 
    padding: 5px; 
 
    text-align: center; 
 
    color: #FFFFFF; 
 
    font-family: helvetica, arial, sans-serif; 
 
    line-height: 1; 
 
    margin: 5px; 
 
} 
 

 
.child:last-child { 
 
    background-color: #1FBBE6; 
 
}

<div class="parent"> 
 
    <div class="child">1</div> 
 
    <div class="child">2</div> 
 
    <div class="child">3</div> 
 
    <div class="child">4</div> 
 
    <div class="child">5</div> 
 
</div> 
 

 
<div class="parent"> 
 
    <div class="child">1</div> 
 
    <div class="child">2</div> 
 
    <div class="child">3</div> 
 
    <div class="child">4</div> 
 
</div> 
 

 
<div class="parent"> 
 
    <div class="child">1</div> 
 
    <div class="child">2</div> 
 
    <div class="child">3</div> 
 
</div> 
 

 
<div class="parent"> 
 
    <div class="child">1</div> 
 
    <div class="child">2</div> 
 
</div>

來源

2017-06-02 m-use

.child { 
    flex: 0 0 calc(33.33% - 10px); 
} 

.child:last-child { 
    flex-grow: 1; 
}

revised codepen

每個孩子都有相同的寬度：33.33％較少水平的利潤率。

最後一個孩子將具有相同的寬度和消耗該行中的剩餘空間（如果有）。

來源

2017-06-02 19:23:17

您需要兩兩件事：

.child:last-child { 
    flex-basis: 100%; 
    flex-shrink: 1; 
}

來源

2017-06-02 19:31:19

不幸的是，這不起作用，因爲灰色框的寬度不等於。 –

您可以結合使用max-width與真正的33.333％Flexbox的。然後，您只需爲last-child設置max-width: none即可。我已添加box-sizing:border-box，並且我已將您的margin: $gutter換成具有相同寬度的白色邊框以保持33％的真實寬度。理想情況下，您應該在每個.child的內部有一個兒童，以提供您的背景顏色和邊距，但無論如何，以下是我的嘗試：https://codepen.io/anon/pen/GERZKj

來源

2017-06-02 19:37:56

相同寬度的flex項目除了最後一個

回答

相關問題