// Programación I · 07 · Layout

# Flexbox

Colocar elementos en fila o en columna, repartir el espacio y centrar cualquier cosa

// el punto de partida

El flujo normal

Sin CSS, los elementos de bloque se apilan uno debajo de otro, cada uno ocupando todo el ancho.

Sirve para textos, pero no para poner el logo a un lado y el menú al otro, ni para hacer columnas.

123

Lo que ya sabes

.aviso {
  text-align: center;
}

Inscripciones abiertas

Inscribirme

text-align mueve lo que hay dentro de la caja: texto, enlaces, imágenes y botones en línea.

.contenedor {
  max-width: 60%;
  margin: 0 auto;
}
caja centrada

margin: 0 auto mueve la caja entera, si tiene un ancho.

Pero ninguno de los dos pone cosas en fila ni centra en vertical. Para eso está Flexbox.

Una línea lo cambia todo

<div class="contenedor">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
.contenedor {
  display: flex;
  gap: 8px;
}
123

Los hijos dejan de apilarse y se ponen en fila. gap añade espacio entre ellos.

Contenedor y elementos

Los dos ejes

123
eje principal · justify-content eje cruzado · align-items

justify-content · repartir a lo largo

flex-startpor defecto
123
center
123
flex-end
123
space-between
123
space-around
123

align-items · alinear a lo alto

stretchpor defecto: misma altura
123
flex-start
123
center
123
flex-end
123

Centrar cualquier cosa

Durante años, centrar algo en vertical fue un quebradero de cabeza. Con Flexbox son tres líneas.

.portada {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
¡Centrado!

Cuando no caben: flex-wrap

nowrap · por defecto, se encogen

1234567

wrap · saltan a la fila siguiente

1234567

Repartir el espacio: flex: 1

Se pone en los hijos: hace que crezcan para repartirse el espacio que sobra.

sin flex

123

.tarjeta { flex: 1; }

123

sólo el segundo con flex: 1

123

En una web de verdad · el menú

.menu {
  display: flex;
  gap: 24px;
  list-style: none;
  padding: 0;
}

la lista, sin estilos

con Flexbox

En una web de verdad · la cabecera

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

El logo a un lado, el menú al otro y los dos centrados en vertical.

// laboratorio

Pruébalo

flex-direction
justify-content
align-items
gap
123

    

  






  
Dos trucos

  

    
El inspector
Chrome muestra una etiqueta flex junto a cada contenedor flexible. Al hacer clic, dibuja los huecos y los ejes sobre la página.

    
Flexbox Froggy
Un juego para practicar: ayudas a unas ranas a llegar a sus nenúfares escribiendo Flexbox.
Jugar ↗

  






  
// y ahora

  
¡A maquetar!

  
Todo esto, con más ejemplos, en los apuntes.

  
Flexbox en los apuntes → Presentación de Grid →