使用柔性基礎來控制行上顯示的項目數

Question

我想要將元素推出以便在使用flex時隱藏它們。

例如，如果flex-basis爲50％，則只顯示兩個項目折入給定空間，而其他元素位於overflow:hidden;區域內。

或者如果flex-basis是25％，則只顯示4個柔性元素並隱藏其他元素。

這可能嗎？

.bargraph { 
 
    display: flex; 
 
    overflow: hidden; 
 
    background: red; 
 
} 
 
.bargraph>dt { 
 
    flex-basis: 50%; 
 
}

<dl class="bargraph"> 
 
    <dt>test</dt> 
 
    <dt>test</dt> 
 
    <dt>test</dt> 
 
    <dt>test</dt> 
 
    <dt>test</dt> 
 
    <dt>test</dt> 
 
</dl>

https://jsfiddle.net/sffo02dp/

Answer 1

除了flex-basis，使用flex-grow和flex-shrink屬性來控制大小。

更具體地說：

• flex-grow: 0
• flex-shrink: 0
• flex-basis: 50%（或任何你希望它是）

這告訴柔性物品：不長，不要」噸收縮，是一個固定的百分比寬度

您可以將所有這些屬性組合成一個規則與flex速記屬性：

flex: 0 0 50%;  /* two items will show, OR... */ 
flex: 0 0 25%  /* four items will show, OR... */ 
flex: 0 0 20%  /* five items will show */ 

下面是完整的代碼：

.bargraph { 
 
    display: flex; 
 
    overflow: hidden; 
 
    background: red; 
 
} 
 
.bargraph>dt { 
 
    flex: 0 0 50%; 
 
}

<dl class="bargraph"> 
 
    <dt>test</dt> 
 
    <dt>test</dt> 
 
    <dt>test</dt> 
 
    <dt>test</dt> 
 
    <dt>test</dt> 
 
    <dt>test</dt> 
 
</dl>

Revised Fiddle

Answer 2

你可以嘗試在你的CSS文件中使用此

bargraph>dt{ 
min-width: 10em; 
} 

這應該是一個很好的選擇，你可以根據父把價值寬度。

希望這有助於

保重，快樂編碼..