FlexBox: quantità minima di spazio tra

Question

Dato questo SCSS/css:

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; 
    } 
} 

Questa disposizione ha il primo elemento in ogni riga allineati a sinistra, e l'ultimo elemento allineato a destra, come richiesto. Here is a codepen illustrating.

Poiché la finestra del browser è costituito stretto, gli distribuiti div elementi saranno avvicinarsi insieme fino toccano, al punto che non vengono nuovamente disposti su una riga aggiuntiva. Di nuovo, il primo div su ogni riga è allineato a sinistra e l'ultimo allineato a destra con lo spazio tra.

C'è un modo per impostare una spaziatura minima in modo che gli elementi interni div abbiano sempre uno spazio tra di loro.

imbottitura e il margine non probabilmente funzionerà, come l'allineamento

<-- 1st left in row e last right in row --> non terrà.

Answer 1

È possibile aggiungere un altro div con stile flessibile per mantenere lo spazio necessario tra le div interne. e per la larghezza minima per tale spazio usare questa proprietà (come menzionato in W3Schools.com):

flex: flex-shrink flex-base-flex | auto | iniziale | inherit;

che flex-shrink è:

flex-shrink: Un numero che specifica quanto l'oggetto si ridurrà rispetto al resto degli elementi flessibili

così, ad esempio, si imposta questo codice css per il div divario:

flex: 1 0 10px; 

che indica che div div avrà 10px di larghezza, e crescerà relativamente Iive al resto degli articoli flessibili, ma NON RIDUCENDO. quindi la larghezza minima sarà 10px alla larghezza più stretta dello schermo.

Answer 2

provare di seguito css. Spero che questo ti aiuti.

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

Un po 'tardi alla festa, ma mi sono imbattuto nello stesso problema. Il modo in cui ho risolto probabilmente non funzionerà per tutti, ma qui è per coloro che possono usarlo.

L'idea di base è di avere un intervallo minimo di x. Impostare i margini sinistro e destro di ciascun articolo su x/2 in modo che la distanza tra gli articoli sia x (margine + margine). Quindi si avvolgono tutti gli elementi in un contenitore con un margine sinistro e destro di -x/2. Ciò nasconderà il margine sugli elementi ai bordi di ciascuna riga.

Ecco un esempio di lavoro:

.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>

La overflow-x: hidden; su .box è quello di prevenire la barra di scorrimento orizzontale che si presenta in alcuni browser causa della traboccante margine.

Se si desidera che il divario sia sempre consistente e per le righe con un solo articolo per fare in modo che l'articolo si estenda all'intera riga, è possibile aggiungere flex-grow: 1 a .item.