Righe di altezza uguale in un contenitore flessibile

Question

Come si può vedere, lo list-items nel primo row ha lo stesso height. Ma gli articoli nel secondo row hanno diverso heights. Voglio che tutti gli articoli abbiano un'uniforme height.

Esiste un modo per raggiungere questo obiettivo senza dare -altezza fissa e solo utilizzando FlexBox?

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>

Answer 1

La risposta è NO.

La ragione è previsto nella specifica FlexBox:

6. Flex Lines

In un multi-linea contenitore flessibile, la dimensione trasversale di ciascuna linea è la dimensione minima necessaria per contenere gli elementi di flessione sulla linea.

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

righe uguale altezza, tuttavia, sono possibili in CSS Griglia layout:

• Equal height rows in CSS Grid Layout

In caso contrario, si consideri un alternativa JavaScript.

Answer 2

per stessa altezza si dovrebbe chage il CSS Properties "Display". Per maggiori dettagli vedi 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>

Answer 3

In tua altezza caso vengono calcolati automaticamente, in modo da avere per fornire l'altezza
uso questo

.list-content{ 
    width: 100%; 
    height:150px; 
} 

Answer 4

è possibile farlo fissando l'altezza della " P "tag o fissare l'altezza di" list-item ".

ho fatto fissando l'altezza della "P"

e troppo pieno deve essere nascosta.

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

Answer 5

No, non è possibile ottenere che senza impostare un'altezza fissa (o utilizzando uno script).

Answer 6

Se si conoscono gli elementi che si stanno mappando, è possibile farlo eseguendo una riga alla volta. So che è una soluzione, ma funziona.

Per quanto mi riguarda ho avuto 4 elementi per riga, così mi spezzò in due file di quattro, con ogni riga height: 50%, sbarazzarsi di flex-grow, hanno <RowOne /> e <RowTwo /> in un <div> con flex-column. Ciò farà il trucco

<div class='flexbox flex-column height-100-percent'> 
    <RowOne class='flex height-50-percent' /> 
    <RowTwo class='flex height-50-percent' /> 
</div> 

Answer 7

Questo 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 non è possibile utilizzare le griglie per qualche motivo, forse è la soluzione.