El menú que se coloca solo
En la web de un bar, el menú de arriba tiene cuatro enlaces en una fila, bien separados.
Si los escribes en HTML, salen uno debajo de otro. Para ponerlos en fila hace falta una herramienta.
Esa herramienta se llama flexbox. Con una línea de CSS, las cajas se ordenan solas.
Palabras clave
| Palabra | Qué significa | Ejemplo |
|---|---|---|
| Flexbox | Una forma de colocar cajas en una fila o en una columna. | display: flex; |
| Contenedor | La caja que guarda a otras cajas. | .row |
| Elemento | Cada caja que está dentro del contenedor. | .item |
| Eje principal | La dirección en que se ponen los elementos: la fila o la columna. | |
| Eje cruzado | La otra dirección, la que cruza el eje principal. | |
| Hueco | El espacio entre dos elementos. En inglés, gap. | gap: 10px; |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Una línea lo cambia todo
Escribe display: flex; en el contenedor. Sus hijos pasan a ser elementos y se ponen en fila.
Las cajas de dentro no necesitan ninguna regla para esto.
Pruébalo: tres cajas en fila
<div class="row">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
Repartir el sitio que sobra
El contenedor mide 400 px y las tres cajas miden 100 px cada una. Sobran 100 px.
La propiedad justify-content decide dónde va ese sitio que sobra, a lo largo del eje principal.
Ejemplo resuelto: dónde empieza cada caja
| justify-content | Caja 1 | Caja 2 | Caja 3 |
|---|---|---|---|
| flex-start | 0 px | 100 px | 200 px |
| center | 50 px | 150 px | 250 px |
| flex-end | 100 px | 200 px | 300 px |
| space-between | 0 px | 150 px | 300 px |
| space-evenly | 25 px | 150 px | 275 px |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Pruébalo: cambia el reparto
<div class="row">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<!-- Cambia space-between por center, flex-end o space-evenly. -->
Repaso rápido: el reparto
Inténtalo
Repaso rápido: el reparto
3 preguntasTus respuestas se corrigen aquí y no se guardan. Una cuenta guarda tus resultados.
Centrar hacia el otro lado
La propiedad align-items coloca los elementos en el eje cruzado.
Con una fila, el eje cruzado es el vertical. Para que se note, el contenedor necesita una altura.
Con justify-content: center; y align-items: center; juntos, el elemento queda en el centro exacto.