Dare spaziatura verticale degli elementi incartati

Question

Recentemente ho suonato con Flexbox per la prima volta e, in generale, è assolutamente incredibile. Recentemente ho riscontrato un problema, in cui non riesco a dare elementi flessibili che avvolgono qualsiasi spaziatura verticale.

Ho provato con:

align-content: space-between; 

, ma questo non sembra di fare nulla. Dalla lettura che ho fatto, sembrerebbe funzionare solo se il mio contenitore flessibile è più alto degli elementi contenuti all'interno (è giusto?) Se così fosse, allora non dovrei impostare un'altezza per il mio contenitore flessibile, che sembrerebbe sconfiggere lo scopo di usare la flexbox?

L'unico modo in cui posso pensare di fare questo lavoro sarebbe quello di dare il margine inferiore agli elementi all'interno, ma ancora una volta sembra sconfiggere lo scopo.

Speriamo che mi manca qualcosa di abbastanza ovvia - ecco un link ad un codepen: http://codepen.io/lordchancellor/pen/pgMEPz

Inoltre, ecco il mio codice:

HTML:

<div class="container"> 
    <div class="col-sm-12"> 
    <h1>Flexbox Wrapping</h1> 

    <div class="flexContainer"> 
     <div class="flexLabel">This is a flex label</div> 

     <a class="btn btn-primary">Button 1</a> 
     <a class="btn btn-warning">Button 2</a> 
     <a class="btn btn-success">Button 3</a> 
    </div> 
    </div> 
</div> 

CSS:

.flexContainer { 
    display: flex; 
    flex-wrap: wrap; 
    align-items: center; 
    align-content: space-between; 
    justify-content: center; 
} 
.flexContainer .flexLabel { 
    flex-basis: 150px; 
    flex-shrink: 0; 
} 

MODIFICA - Aggiungo un po 'più di dettagli qui, dato che non sono sicuro di essere p facendolo attraversare abbastanza bene.

Nel mio progetto più grande, ho alcuni elementi a livello di blocco che sono disposti in fila usando flexbox. Tuttavia, ci deve essere un po 'di reattività in quanto l'utente può ridurre la larghezza dello schermo. A questo punto, voglio che i miei elementi inizino a impilare (da qui il wrap). Tuttavia, quando gli elementi iniziano a impilarsi, tutti si toccano verticalmente, dove voglio che ci sia spazio.

Sta cominciando a sembrare che i margini superiori e inferiori potrebbero essere l'unico modo per risolvere questo problema, tuttavia mi chiedevo se esistesse un modo flessibile per raggiungere questo obiettivo.

Answer 1

Se imposti il ​​wrapping applicando una larghezza, puoi quindi utilizzare i margini come faresti normalmente senza impostare un'altezza.

.flexContainer { 
 
    display: flex; 
 
    align-items: center; 
 
    flex-wrap: wrap; 
 
    justify-content: center; 
 
    background: pink; 
 
    width: 150px; 
 
} 
 
.flexContainer > * { 
 
    margin: 1em 0; 
 
} 
 
.flexContainer .flexLabel { 
 
    flex-basis: 150px; 
 
    flex-shrink: 0; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="container"> 
 
    <div class="col-sm-12"> 
 
    <h1>Flexbox Wrapping</h1> 
 

 
    <div class="flexContainer"> 
 

 
     <div class="flexLabel">This is a flex label</div> 
 

 
     <a class="btn btn-primary">Button 1</a> 
 
     <a class="btn btn-warning">Button 2</a> 
 
     <a class="btn btn-success">Button 3</a> 
 
    </div> 
 

 
    </div> 
 
</div>

Answer 2

È perché non si ha un'altezza sul contenuto flessibile perché calcoli lo spazio, quindi al momento il contenitore flessibile è il più piccolo possibile. Aggiungi un'altezza e dovrebbe funzionare.

Answer 3

ho avuto un problema simile e ho usato il seguente incidere per risolvere il problema.

/* add a negative top-margin to the flex container */ 
.flexContainer { 
     /* ... your existing flex container styles here */ 
    margin: -10px 0 0 0; 
} 
    /* add a corresponding positive top margin to all flex items (all direct children of the flex container) */ 
.flexContainer > * { 
    margin-top: 10px; 
} 

Per la fila superiore di oggetti flessibili i margini negativi e positivi annullano, per le righe successive si aggiunge il margine tra le righe (in questo caso 10px tra le righe).

È meno elegante, ma ha il compito.

Answer 4

Un'altra soluzione hacky è quello di dare alla voce un bordo inferiore:

border-bottom: 10px solid gray; 

il colore deve essere il colore dello sfondo, ovviamente.