Filas de igual altura en un contenedor flexible

91

Como puede ver, list-itemsel primero rowtiene lo mismo height. Pero los elementos del segundo rowtienen diferentes heights. Quiero que todos los artículos tengan uniforme height.

¿Hay alguna forma de lograr esto sin dar una altura fija y solo usando flexbox ?

ingrese la descripción de la imagen aquí

Aquí está mi 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>
Expandir fragmento

html css flexbox Jinu Kurian
fuente
Una forma es establecer la altura en el elemento que puede variar en altura
onmyway133

Respuestas:

79

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 cruzado 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, las filas de igual altura son posibles en CSS Grid Layout:

De lo contrario, considere una alternativa de JavaScript.

Michael Benjamin
fuente
¿Es seguro usar css grid por ahora?
Alexander Kim
40

Puede lograr eso 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>
Expandir fragmento

Aunque la cuadrícula en sí no es flexbox, se comporta de manera muy similar a un contenedor de flexbox , y los elementos dentro de la cuadrícula pueden ser flexibles .

El diseño de la cuadrícula también es muy útil en el caso de que desee cuadrículas receptivas. Es decir, si desea que la cuadrícula tenga un número diferente de columnas por fila, puede simplemente 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

y así...

Puede mezclarlo 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 (fuera de la caja) para que funcione bien al cambiar el número de columnas de acuerdo con el tamaño del contenedor, no con el tamaño de la página (esto sería genial de usar 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

Lucas Basquerotto
fuente
¡Este es el tipo de enfoque de "puedo hacer" que me gusta! Gracias por el ejemplo de trabajo también
hananamar
0

Si conoce los elementos que está mapeando, puede lograrlo haciendo una fila a la vez . Sé que es una solución alternativa, pero funciona.

Para mí, tenía 4 elementos por fila, así que lo dividí en dos filas de 4 con cada fila height: 50%, deshacerse de flex-grow, tener <RowOne />y <RowTwo />en una <div>con flex-column. Esto hará el truco

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

Esto parece funcionar en casos con una altura principal fija (probado en Chrome y 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;
}

Si no es posible usar grids por alguna razón, tal vez sea la solución.

Stanislav E. Govorov
fuente
0

Con respecto a la solución alternativa interactiva mencionada en la primera respuesta ... Forzar que las columnas flexibles tengan la misma altura en todas las filas se puede hacer usando jQuery al cargar:

$(function () {
    // Set the cards height to be the same in all lines
    $('.same-wrap-height').each(function () {
        let heighest = 0;

        $('.new-card', this).each(function () {
            if ($(this).height() > heighest) {
                heighest = $(this).height();
            }
        });

        $('.new-card', this).height(heighest);
    });
});

Mi diseño de Bootstrap:

<div class="row same-wrap-height">
    <div class="col-lg-6 ... new-card">
        <div class="card h-100">
            ...
        </div>
    </div>

    <div class="col-lg-6 ... new-card">
        <div class="card h-100">
            ...
        </div>
    </div>
</div>
Sky7ure
fuente
-1

En su caso, la altura se calculará automáticamente, por lo que debe proporcionar la altura,
use esta

.list-content{
  width: 100%;
  height:150px;
}
Tom
fuente
Lo siento, la altura puede variar según el contenido. Entonces no puedo dar una altura fija.
Jinu Kurian
Las alturas se calculan automáticamente, por lo que con su contenido diferente, las alturas serán diferentes, por lo que debe usar una altura fija, de lo contrario no podrá obtener alturas uniformes.
Tom
-1

Puedes 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>
Expandir fragmento

Hisham Dalal
fuente
No creo que esto dé la misma altura cuando los elementos se apilan verticalmente.
workwise hace
lo siento, pero puedes probar con otra respuesta en lugar de marcar como negativa mi respuesta.
Hisham Dalal hace
-3

puede hacerlo fijando la altura de la etiqueta "P" o fijando la altura de "elemento de lista".

Lo he hecho fijando la altura de "P"

y el desbordamiento debe estar oculto.

.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
fuente
No parece la respuesta que estoy buscando, si el contenido se agranda, se ocultará.
Jinu Kurian
@JinuKurian donde estoy agregando overflow: hidden, si lo cambia a overflow: auto, aparecerá el desplazamiento. entonces también puedes ver el contenido completo
Ajay Malhotra
-6

para la misma altura, debe cambiar las Propiedades de "pantalla" de CSS. Para más detalles, vea el ejemplo dado.

.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
fuente
Gracias, pero quiero mostrar las listas en varias filas.
Jinu Kurian