html - manejo - tutorial flexbox

Hileras de igual altura en un contenedor flexible

Question

Como puede ver, los list-items la list-items en la primera row tienen la misma height . Pero los artículos en la segunda row tienen diferentes heights . Quiero que todos los artículos tengan una height uniforme.

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

Aqui esta 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>

Answer 1

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

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

Answer 2

Esto parece estar funcionando en casos con altura de padre 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 por alguna razón no es posible usar cuadrículas, tal vez sea la solución.

Answer 3

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

• Filas de igual altura en el diseño de cuadrícula CSS

De lo contrario, considere una alternativa de JavaScript.

Answer 4

No, no puede lograrlo 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 así:

• ¿Cómo obtener un encabezado de tarjetas o similar para tener la misma altura con caja flexible?

• Misma altura para artículos flexibles en el contenedor flexible de columna de dirección flexible

Answer 5

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

Para mí, tenía 4 elementos por fila, así que lo dividí en dos filas de 4 con cada height: 50% fila height: 50% , elimine el flex-grow , tenga <RowOne /> y <RowTwo /> en un <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>

Answer 6

para la misma altura, debe cambiar sus propiedades de "pantalla" css. Para más detalles ver 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>

Answer 7

puede hacerlo fijando la altura de la etiqueta "P" o fijando la altura de "list-item".

Lo he hecho arreglando 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>

Answer 8

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>

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 contenedor / consultas de elementos en los navegadores (fuera de la caja) para que funcione bien cambiando 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 para 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