Mit Flex-Basis, um die Anzahl der in der Zeile angezeigten Elemente zu steuern

Question

Ich möchte Elemente ausblenden, um sie zu verstecken, während Sie flex verwenden.

Wenn z. B. flex-basis 50% ist, zeigen Sie nur zwei Elemente an, die in den angegebenen Bereich gebogen sind, während sich die anderen Elemente in overflow:hidden; befinden.

Oder wenn flex-basis 25% ist, dann nur 4 Flex-Elemente anzeigen und die anderen verstecken.

Ist das möglich?

.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

Neben flex-basis, verwenden Sie die flex-grow und flex-shrink Eigenschaften Dimensionierung zu steuern.

Genauer gesagt:

• flex-grow: 0
• flex-shrink: 0
• flex-basis: 50%

Dies sagt Flex Elemente (oder was auch immer Sie es wollen): nicht wächst, don‘ t schrumpfen, eine feste prozentuale Breite sein

Sie können mit dem flex Kurzschrift-Eigenschaft, alle diese Eigenschaften in einer Regel kombinieren:

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 */ 

Hier ist der vollständige Code:

.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

Sie können mit dieser in Ihrem CSS-Datei versuchen

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

Dies ist eine gute Alternative sein sollte und Sie den Wert basierend auf der übergeordneten setzen können Breite.

this helps

Achten Sie darauf und glücklich Codierung ..