Seminario CSS - Ejemplo del modelo de cajas Flexbox

Con la propiedad display: flex podemos controlar más efectivamente cómo se distribuyen los elementos hijos y el espacio entre ellos.

Distribución de elementos

Elementos igualmente espaciados.e

Se ha emplado display: flex; en el contenedor de los tres div. Prueba a cambiar la anchura de la página para comprobar su comportamiento. Por defecto la alineación es en filas flex-direction: row.

Columna 1

Elemento flexible

Columna 2

Elemento flexible con más texto

Columna 3

Elemento flexible con mucho más texto que los demás elementos

Debajo aparecen las mismas cajas pero cambiando la dirección principal a columnas flex-direction: column.

Columna 1

Elemento flexible

Columna 2

Elemento flexible con más texto

Columna 3

Elemento flexible con mucho más texto que los demás elementos

Si los hijos se desborda en caso de contenedores de ancho fijo de puede emplear flex-wrap: wrap.

Columna 1

Elemento flexible

Columna 2

Elemento flexible con más texto

Columna 3

Elemento flexible con mucho más texto que los demás elementos

Columna 4

Elemento flexible

Columna 5

Elemento flexible

Columna 6

Elemento flexible

Estilos

div.flex-container {
  display: flex;
  margin-bottom: 2em;
}
                  
div.flex-container-column {
  display: flex;
  margin-bottom: 2em;
  flex-direction: column;
}
                  
div.box {
  border: 2px solid black;
  border-radius: 5px;
  padding: 5px;
  margin-right: 1em;
  margin-bottom: 1em;
  background-color: antiquewhite;
}
      
div.flex-container-column {
    display: flex;
    margin-bottom: 2em;
    flex-direction: column;
  }

div.flex-container-wrap {
    display: flex;
    margin-bottom: 2em;
    flex-wrap: wrap;
    flex-direction: row;
    width: 600px;
}
div.wrap {
    flex:200px
}

Elementos igualmente espaciados.

Se ha emplado justify-content: space-between; para que los elementos tengan un espaciado uniforme en el eje principal.

Columna 1

Elemento
flexible

Columna 2

Elemento
flexible

Columna 3

Elemento flexible con
mucho más texto
que los demás elementos

Estilos

div.flex-container-justify {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2em;
}

Elementos con diferentes proporciones

Se ha emplado flex: 1; y flex: 2; para cambiar la proporción que ocupan los elementos en el contendor.

Columna 1

Elemento flex: 2

Columna 2

Elemento flex: 1

Columna 3

Elemento flex: 1

Estilos

div.flex1 {
    flex: 1;
}
div.flex2 {
    flex: 2;
}

Anidación de elementos flexibles

Se ha emplado flex: 1; y flex: 2; para cambiar la proporción que ocupan los elementos en el contendor.

Elemento flex: 1

Columna 2

Elemento flex: 1

Columna 3

Elemento flex: 1