Filas de igual altura en un contenedor flexible
Como puede ver, los list-itemsdel primero rowtienen lo mismo height. Pero los elementos del segundo rowtienen diferencias heights. Quiero que todos los artículos tengan un uniforme height.
¿Hay alguna manera de lograr esto sin dar una altura fija y solo usar flexbox ?
Aquí está micode
.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>
La respuesta es no.
El motivo se proporciona en la especificación de flexbox:
6. Líneas flexibles
En un contenedor flexible de varias líneas, el tamaño transversal de cada línea es el tamaño mínimo necesario para contener los elementos flexibles en la línea.
En otras palabras, cuando hay varias líneas en un contenedor flexible basado en filas, la altura de cada línea (el "tamaño cruzado") es la altura mínima necesaria para contener los elementos flexibles en la línea.
Sin embargo, es posible crear filas de igual altura en CSS Grid Layout:
- Filas de igual altura en CSS Grid Layout
De lo contrario, considere una alternativa de JavaScript.
Puedes lograrlo ahora 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>Aunque la cuadrícula en sí no es flexbox, se comporta de manera muy similar a un contenedor flexbox y los elementos dentro de la cuadrícula pueden ser flex .
El diseño de la cuadrícula también es muy útil en caso de que desee cuadrículas responsivas. Es decir, si desea que la cuadrícula tenga un número diferente de columnas por fila, simplemente puede cambiar 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
etcétera...
Puede combinarlo con consultas de medios y cambiar según el tamaño de la página.
Lamentablemente, todavía no hay soporte para consultas de contenedores/consultas de elementos en los navegadores (listos para usar) para que funcione bien cambiando el número de columnas según el tamaño del contenedor, no según el tamaño de la página (sería genial usarlo). con componentes web reutilizables).
Más información sobre el diseño de la cuadrícula:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
Compatibilidad con el diseño de cuadrícula en todos los navegadores:
https://caniuse.com/#feat=css-grid
Flexbox: ¿Hacer que todos los elementos flexibles tengan la misma altura?
En el elemento hijo
align-self: stretch;
o en el contenedor principal
justify-content: stretch;
Puedes con flexbox para temas horizontales:
.flex-list {
padding: 0;
list-style: none;
display: flex;
align-items: stretch;
flex-wrap: wrap;
justify-content: center;
gap: .5rem;
}
.flex-list li {
width: 120px;
padding: .5rem;
border-radius: 1rem;
background: yellow;
}<ul class="flex-list">
<li>title 1</li>
<li>title 2</li>
<li>title 3<br>new line</li>
<li>title 4<br>new line</li>
<li>title 5<br>new<br>line</li>
<li>title 6</li>
</ul>O con rejilla tanto para cuestiones horizontales como verticales:
.grid-list {
padding: 0;
list-style: none;
display: grid;
grid-auto-columns: 1fr;
grid-auto-rows: 1fr;
grid-template-columns: repeat(3, 1fr);
gap: .5rem;
}
.grid-list li {
padding: .5rem;
border-radius: 1rem;
background: yellow;
}
.grid-list li:last-child {
grid-column-start: 2;
} <ul class="grid-list">
<li>title 1</li>
<li>title 2<br>new<br>line</li>
<li>title 3<br>new line</li>
<li>title 4<br>new line</li><li>title 5</li>
<li>title 6<br>new<br>line</li>
<li>title 7</li>
</ul>
No, no puedes lograr eso sin establecer una altura fija (o usar un script).
Aquí hay 2 respuestas mías, que muestran cómo usar un script para lograr algo como eso:
¿Cómo hacer que el encabezado de las tarjetas o similares tenga la misma altura con la caja flexible?
Misma altura para elementos flexibles en el contenedor flexible de columna de dirección flexible
