File di uguale altezza in un contenitore flessibile

94

Come puoi vedere, list-itemsnel primo rowhanno lo stesso height. Ma gli elementi nel secondo rowsono diversi heights. Voglio che tutti gli articoli abbiano un'uniforme height.

C'è un modo per ottenere questo risultato senza dare un'altezza fissa e utilizzando solo flexbox ?

inserisci qui la descrizione dell'immagine

Ecco il mio code 

.list {
  display: flex;
  flex-wrap: wrap;
  max-width: 500px;
}
.list-item {
  background-color: #ccc;
  display: flex;
  padding: 0.5em;
  width: 25%;
  margin-right: 1%;
  margin-bottom: 20px;
}
.list-content {
  width: 100%;
}
<ul class="list">
  <li class="list-item">
    <div class="list-content">
      <h2>box 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>

  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor</p>
    </div>
  </li>

  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h1>h1</h1>
    </div>
  </li>
</ul>
Espandi lo snippet

html  css  flexbox 
— Jinu Kurian
fonte
Un modo è impostare l'altezza dell'elemento che può variare in altezza
— onmyway133

Risposte:

80

La risposta è no.

Il motivo è fornito nelle specifiche flexbox:

6. Linee flessibili

In un contenitore flessibile multilinea, la dimensione trasversale di ciascuna riga è la dimensione minima necessaria per contenere gli elementi flessibili sulla riga.

In altre parole, quando ci sono più righe in un contenitore flessibile basato su righe, l'altezza di ciascuna riga (la "dimensione della croce") è l'altezza minima necessaria per contenere gli elementi flessibili sulla riga.

Tuttavia, nel layout griglia CSS sono possibili righe di altezza uguale:

Altrimenti, considera un'alternativa JavaScript.

— Michael Benjamin
fonte
La griglia CSS è sicura da usare come per ora?
— Alexander Kim
43

Puoi farlo ora con display: grid:

.list {
  display: grid;
  overflow: hidden;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  max-width: 500px;
}
.list-item {
  background-color: #ccc;
  display: flex;
  padding: 0.5em;
  margin-bottom: 20px;
}
.list-content {
  width: 100%;
}
<ul class="list">
  <li class="list-item">
    <div class="list-content">
      <h2>box 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>

  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor</p>
    </div>
  </li>

  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h1>h1</h1>
    </div>
  </li>
</ul>
Espandi lo snippet

Sebbene la griglia in sé non sia flexbox, si comporta in modo molto simile a un contenitore flexbox e gli elementi all'interno della griglia possono essere flessibili .

Il layout della griglia è anche molto utile nel caso in cui desideri griglie reattive. Cioè, se vuoi che la griglia abbia un numero diverso di colonne per riga, puoi semplicemente cambiare grid-template-columns:

grid-template-columns: repeat(1, 1fr); // 1 column
grid-template-columns: repeat(2, 1fr); // 2 columns
grid-template-columns: repeat(3, 1fr); // 3 columns

e così via...

Puoi combinarlo con le media query e modificarlo in base alle dimensioni della pagina.

Purtroppo non c'è ancora alcun supporto per le query del contenitore / query di elementi nei browser (fuori dagli schemi) per farlo funzionare bene con la modifica del numero di colonne in base alle dimensioni del contenitore, non alle dimensioni della pagina (sarebbe fantastico da usare con componenti web riutilizzabili).

Maggiori informazioni sul layout della griglia:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

Supporto del layout a griglia sui browser:

https://caniuse.com/#feat=css-grid

— Lucas Basquerotto
fonte
Questo è il tipo di approccio "si può fare" che mi piace! Grazie anche per l'esempio funzionante
— hananamar
questo non implementa lo stesso comportamento del wrapping di flexbox. anche la domanda a cui è stata richiesta una risposta utilizzando flexbox.
— Andy
@ Andy Come dice già la risposta accettata, non puoi ottenerlo con flexbox (senza js). Mi sono anche assicurato di dire che in realtà non è flexbox ("Sebbene la griglia stessa non sia flexbox ..."), e non sto dicendo che il comportamento sia esattamente lo stesso di flexbox (il che è ovvio), ma è molto simile e risolve il problema chiesto (tranne per il fatto che non è flexbox) e , cosa più importante , può risolvere problemi simili per altri utenti che cercano un approccio simile. Inoltre, gli elementi possono essere flexbox (al contrario di un layout di tabella, che prevede elementi da tavolo, ad esempio).
— Lucas Basquerotto
1

Sembra funzionare nei casi con altezza genitore fissa (testato in Chrome e Firefox):

.child {
        height    : 100%;
        overflow  : hidden;
}

.parent {
        display: flex;
        flex-direction: column;
        height: 70vh; // ! won't work unless parent container height is set
        position: relative;
}

Se per qualche motivo non è possibile utilizzare le griglie, forse è la soluzione.

— Stanislav E. Govorov
fonte
0

Se conosci gli elementi su cui stai mappando, puoi farlo facendo una riga alla volta . So che è una soluzione alternativa, ma funziona.

Per me avevo 4 articoli per riga, quindi l'ho suddiviso in due file da 4 con ogni riga height: 50%, sbarazzarmi di flex-grow, avere<RowOne /> e <RowTwo />in una <div>con flex-column. Questo farà il trucco

<div class='flexbox flex-column height-100-percent'>
   <RowOne class='flex height-50-percent' />
   <RowTwo class='flex height-50-percent' />
</div>
— Kevin Danikowski
fonte
-1

Nel tuo caso l'altezza verrà calcolata automaticamente, quindi devi fornire l'altezza da
usare

.list-content{
  width: 100%;
  height:150px;
}
— Tom
fonte
Mi dispiace, l'altezza può variare in base al contenuto. Quindi non posso dare un'altezza fissa.
— Jinu Kurian
Le altezze vengono calcolate automaticamente, quindi con i tuoi diversi contenuti, le altezze saranno diverse, quindi devi usare l'altezza fissa altrimenti non puoi ottenere altezze uniformi.
— Tom
-1

Puoi con flexbox:

ul.list {
    padding: 0;
    list-style: none;
    display: flex;
    align-items: stretch;
    justify-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
li {
    width: 100px;
    padding: .5rem;
    border-radius: 1rem;
    background: yellow;
    margin: 0 5px;
}
<ul class="list">
  <li>title 1</li>
  <li>title 2<br>new line</li>
  <li>title 3<br>new<br>line</li>
</ul>
Espandi lo snippet

— Hisham Dalal
fonte
Non penso che questo dia la stessa altezza quando gli oggetti sono impilati verticalmente.
— lavoro il
scusa, ma puoi provare un'altra risposta invece di contrassegnare come negativa la mia risposta!
— Hisham Dalal
-3

puoi farlo fissando l'altezza del tag "P" o fissando l'altezza di "list-item".

Ho fatto fissando l'altezza di "P"

e l'overflow dovrebbe essere nascosto.

.list{
  display: flex;
  flex-wrap: wrap;
  max-width: 500px;
}

.list-item{
  background-color: #ccc;
  display: flex;
  padding: 0.5em;
  width: 25%;
  margin-right: 1%;
  margin-bottom: 20px;
}
.list-content{
  width: 100%;
}
p{height:100px;overflow:hidden;}
<ul class="list">
  <li class="list-item">
    <div class="list-content">
    <h2>box 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>
  
    <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor</p>
    </div>
  </li>
  
    <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h1>h1</h1>
    </div>
  </li>
</ul>

— Ajay Malhotra
fonte
Non sembra la risposta che sto cercando, se il contenuto diventa più grande, verrà nascosto.
— Jinu Kurian
@JinuKurian dove sto aggiungendo overflow: hidden, se lo cambi in overflow: auto, apparirà lo scorrimento. allora puoi anche vedere il contenuto completo
— Ajay Malhotra
-6

per la stessa altezza dovresti cambiare le proprietà di "visualizzazione" del tuo css. Per maggiori dettagli vedere l'esempio fornito.

.list{
  display: table;
  flex-wrap: wrap;
  max-width: 500px;
}

.list-item{
  background-color: #ccc;
  display: table-cell;
  padding: 0.5em;
  width: 25%;
  margin-right: 1%;
  margin-bottom: 20px;
}
.list-content{
  width: 100%;
}
<ul class="list">
  <li class="list-item">
    <div class="list-content">
    <h2>box 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>
  
    <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor</p>
    </div>
  </li>
  
    <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h1>h1</h1>
    </div>
  </li>

— Ankit
fonte
Grazie ma desidero visualizzare gli elenchi su più righe.
— Jinu Kurian
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.