FlexBox: minimale Menge an Raum zwischen

Question

diesem SCSS/CSS Gegeben:

div.container { 
    display:flex; 
    flex-flow: row wrap; 
    justify-content:space-between; 
    border: 1px solid blue; 
    div { 
    width: 200px; 
    border: 1px solid gray; 
    display:inline-block; 
    text-align: center; 
    } 
} 

Diese Anordnung hat das erste Element in jeder Zeile nach links ausgerichtet ist, und das letzte Element nach rechts ausgerichtet ist, wie erforderlich. Here is a codepen illustrating.

als Browser-Fenster enger gemacht wird, die verteilten div Elemente näher zusammen bewegen, bis sieberühren, an welcher Stelle sie über eine zusätzliche Reihe neu angeordnet werden. Auch hier ist das erste div in jeder Zeile nach links und das letzte nach rechts ausgerichtet.

Gibt es eine Möglichkeit, einen Mindestabstand so einzustellen, dass die inneren div Elemente immer eine Lücke zwischen ihnen haben.

Polsterung und Marge wird wahrscheinlich nicht funktionieren, da die Ausrichtung

<-- 1st left in row und last right in row --> wird nicht halten.

Answer 1

Sie können ein weiteres div mit Flex-Stil hinzufügen, um die benötigte Lücke zwischen den inneren divs zu halten. und für die minimale Breite für diese Lücke verwenden Sie diese Eigenschaft (wie in W3Schools.com erwähnt):

flex: flex-wachsen flex-shrink flex-basis | auto | initial | erben;

die Flex-Schrumpf ist:

flex-schrumpfen: Eine Zahl angibt, wie viel das Element an den Rest der flexiblen Elemente relativ schrumpfen

so, Sie zum Beispiel Stellen Sie diesen CSS-Code für die Lücke div:

flex: 1 0 10px; 

, die Lücke div wird 10px Breite haben, und wird relativ wachsen ive für den Rest der flexiblen Elemente, aber nicht schrumpfen. Die minimale Breite beträgt also 10 Pixel an der schmalsten Bildschirmbreite.

Answer 2

versuchen unter css. Hoffe das hilft.

div.container { 
    position:absolute; 
    border: 1px solid blue; 
    div { 
    width: 200px; 
    margin:0px; 
    border: 1px solid gray; 
    display: inline-block; 
    text-align: center; 
    } 
} 

Answer 3

Bit spät die die Partei, aber ich lief in das gleiche Problem. Die Art, wie ich es gelöst habe, wird wahrscheinlich nicht für alle funktionieren, aber hier ist es für diejenigen, die es benutzen können.

Die Grundidee ist, dass Sie eine min Lücke von x haben. Sie legen den linken und rechten Rand jedes Elements auf x/2 fest, sodass der Abstand zwischen den Elementen x (Rand + Rand) ist. Dann wickeln Sie alle Elemente in einen Container mit einem linken und rechten Rand von -x/2. Dadurch wird der Rand der Elemente an den Rändern jeder Zeile ausgeblendet.

Hier ist ein funktionierendes Beispiel:

.box { 
 
    border: 1px solid black; 
 
    overflow-x: hidden; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
    margin: 0 -1em; 
 
} 
 

 
.item { 
 
    display: flex; 
 
    border: 1px solid grey; 
 
    padding: 1em; 
 
    width: 20%; 
 
    margin: 0 1em; 
 
}

<div class="box"> 
 
    <div class="container"> 
 
    <div class="item">1</div> 
 
    <div class="item">2</div> 
 
    <div class="item">3</div> 
 
    <div class="item">4</div> 
 
    <div class="item">5</div> 
 
    </div> 
 
</div>

Die overflow-x: hidden; auf .box ist die horizontalen Scrollbalken zu verhindern, die aufgrund der Marge überquell in einigen Browsern erscheint.

Wenn die Lücke immer konsistent sein soll und Zeilen mit nur einem Element die gesamte Zeile umfassen sollen, können Sie flex-grow: 1 zu .item hinzufügen.