¿Cómo deshabilitar columnas de igual altura en Flexbox?

Te encuentras con la función de columnas flexibles de igual altura.

Una configuración inicial de un contenedor flexible es align-items: stretch.

Esto significa que los elementos flexibles se expanden automáticamente a lo largo de toda la longitud del eje transversal del contenedor. En un contenedor en dirección de fila, el eje transversal es vertical (alto).

El elemento más alto establece la altura de todos los hermanos. A medida que el objeto más alto se expande, sus hermanos lo siguen. Por lo tanto, la misma altura para todos los artículos.

Para anular esta configuración predeterminada, agregue align-items: flex-startal contenedor flexible:

#container_add_movies {
   display: flex;
   align-items: flex-start;
}

#container_add_movies {
  display: flex;
  align-items: flex-start;       /* NEW */
}

#container_add_movies #feedback {
  width: 20%;
  background-color: green;
  display: block;
}

#container_add_movies #search {
  width: 60%;
  background-color: red;
}

#container_add_movies #suggestions {
  width: 20%;
  background-color: yellow;
}

<div id='container_add_movies'>
  <div id='feedback'>Feedback</div>
  <div id='search'>
    Search<br>Search<br>Search<br>Search<br>Search<br> Search
    <br>Search<br>Search<br>Search<br>Search<br>
  </div>
  <div id='suggestions'>Suggestions</div>
</div>

... o align-self: flex-starta los elementos flexibles:

#feedback {
    align-self: flex-start;
    width: 20%;
    background-color: green;
}

 #suggestions {
    align-self: flex-start; 
    width: 20%;
    background-color: yellow;
}

#container_add_movies {
  display: flex;
}

#container_add_movies #search {
  width: 60%;
  background-color: red;
}

#feedback {
  align-self: flex-start;  /* NEW */
  width: 20%;
  background-color: green;
}

#suggestions {
  align-self: flex-start;  /* NEW */
  width: 20%;
  background-color: yellow;
}

<div id='container_add_movies'>
  <div id='feedback'>Feedback</div>
  <div id='search'>
    Search<br>Search<br>Search<br>Search<br>Search<br> Search
    <br>Search<br>Search<br>Search<br>Search<br>
  </div>
  <div id='suggestions'>Suggestions</div>
</div>

align-itemsestablece el valor predeterminado de align-self. Con align-selfpuede anular el valor predeterminado en elementos individuales.

Más detalles en las especificaciones:

8.3. Alineación de ejes transversales: las propiedades align-itemsyalign-self

Los elementos flexibles se pueden alinear en el eje transversal de la línea actual del contenedor flexible, de manera similar justify-contentpero en dirección perpendicular.

align-itemsestablece la alineación predeterminada para todos los elementos del contenedor flexible, incluidos los elementos flexibles anónimos.

align-selfpermite anular esta alineación predeterminada para elementos flexibles individuales.

Un poco de historia

Desde los inicios de CSS, ha habido dos desafíos de diseño que regularmente han frustrado, desconcertado y molesto a los desarrolladores de aplicaciones para el usuario:

1. Cómo centrar cosas, especialmente verticalmente, y
2. Cómo crear columnas de igual altura (tablas a un lado)

Hoy, con la llegada de flexbox, estos problemas se acabaron.

Centrar cosas nunca ha sido tan fácil:

#container {
    display: flex;
    justify-content: center;    /* center flex items along the main axis */
    align-items: center;        /* center flex items along the cross axis */
}

Simple. Fácil. Eficiente. Se acabó la locura .

En términos de columnas de igual altura, flexbox también sobresale: lo hace de forma predeterminada.

#container {
    display: flex;
    flex-direction: row;        /* not even necessary; default rule */
    align-items: stretch;       /* not even necessary; default rule */
}

La align-items: stretchregla le dice a los elementos flexibles que se expandan a lo largo del eje transversal tanto como sea posible. Por lo tanto, en un contenedor en dirección de fila, todos los elementos pueden tener la misma altura. "Más locura domesticada por flexbox ".

De una respuesta popular para columnas de igual altura :

Dé overflow: hiddenal contenedor un margen negativo grande (e igual) y relleno positivo a las columnas. Tenga en cuenta que este método tiene algunos problemas, por ejemplo, los enlaces ancla no funcionarán dentro de su diseño.

¡Eso sí que es un truco!

El péndulo ahora comienza a oscilar en la otra dirección: los diseñadores preguntan cómo APAGAR las columnas de igual altura.

Oct 09 '2015 16:10 Michael Benjamin