Rimuovi spazio (spazi vuoti) tra più linee di elementi flessibili quando si avvolgono

Sto cercando di avere un numero di elementi sotto l’altro in un contenitore con un’altezza impostata. Gli oggetti continueranno poi uno accanto all’altro se non c’è più spazio.

Questa è l’idea:

Sto cercando di ottenere questo risultato utilizzando la flexbox, un contenitore con un’altezza impostata, la direzione è impostata su column e l’ flex-wrap è wrap :

Il problema è che ci sono ampi spazi tra le colonne.

inserisci la descrizione dell'immagine qui

Ho provato a impostare sia justify-content che align-items su flex-start , ma probabilmente è il valore predefinito.

C’è un modo per risolverlo?

Ecco il codice:

 * { box-sizing: border-box; } body { font-family: sans-serif; } .container { display: flex; flex-wrap: wrap; height: 300px; flex-direction: column; background-color: #ccc; } .items { width: 100px; height: 100px; margin: 10px; background-color: tomato; color: white; font-size: 60px; font-weight: bold; text-align: center; padding: 15px; } 
 
1
2
3
4
5

codepen

Un’impostazione iniziale di un contenitore flessibile è il contenuto align-content: stretch .

Ciò significa che più linee di elementi flessibili saranno distribuite uniformsmente lungo l’asse trasversale.

Per sovrascrivere questo comportamento, applica il align-content: flex-start al contenitore.


Quando lavori in un contenitore flessibile a linea singola (ad esempio, flex-wrap: nowrap ), le proprietà da utilizzare per distribuire lo spazio lungo l’asse trasversale sono align-items e align-self .

Quando lavori in un contenitore flessibile su più linee (ad es., flex-wrap: wrap ), come nella domanda, la proprietà da utilizzare per distribuire le linee flessibili (righe / colonne) lungo l’asse trasversale è il align-content .

Dalla specifica:

8.3. Allineamento dell’asse trasversale: gli align-items align-self proprietà di align-self

align-items imposta l’allineamento predefinito per tutti gli elementi del contenitore flessibile, inclusi gli elementi flessibili anonimi. align-self consente l’override di questo allineamento predefinito per singoli elementi flessibili.

8.4. Flex Lines: la proprietà di align-content

La proprietà del align-content allinea le linee di un contenitore flessibile all’interno del contenitore flessibile quando vi è spazio extra nell’asse trasversale, in modo simile a come il justify-content allinea i singoli elementi all’interno dell’asse principale. Nota, questa proprietà non ha alcun effetto su un contenitore flessibile a linea singola.

La proprietà align-content accetta sei valori:

  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
  • stretch

Ecco la definizione per stretch :

stretch

Le linee si allungano per occupare lo spazio rimanente. Se lo spazio libero rimanente è negativo, questo valore è identico a flex-start . In caso contrario, lo spazio libero viene suddiviso equamente tra tutte le linee, aumentandone le dimensioni incrociate.

In altre parole, il align-content: stretch sull’asse trasversale è simile al flex: 1 sull’asse principale.