En la lección anterior de Flexbox colocaste elementos en una fila con justify-content y align-items.
flex-direction elige el eje principal: row, row-reverse, column o column-reverse.
order cambia el orden visual; align-self coloca un solo elemento.
flex-wrap: wrap deja saltar de línea, flex-flow junta dirección y salto, y align-content reparte las líneas.
space-evenly deja todos los huecos iguales, también los de los bordes.
En la lección anterior de Flexbox colocaste elementos en una fila con justify-content y align-items. Con cuatro propiedades más resuelves casi cualquier fila o columna: darle la vuelta, cambiar el orden sin tocar el HTML, mover un solo elemento y repartir varias líneas.
flex-direction decide cuál es el eje principal:
ValorEje principalEmpieza en… row (por defecto)HorizontalLa izquierda row-reverseHorizontalLa derecha columnVerticalArriba column-reverseVerticalAbajo
Al cambiar la dirección cambian los ejes. En una columna, justify-content mueve en vertical y align-items en horizontal:
.lateral { display: flex; flex-direction: column; /* uno debajo de otro */ justify-content: flex-end; /* pegados abajo */ }
Además de space-between y space-around, justify-content admite space-evenly: el mismo espacio entre los elementos y entre ellos y los bordes.
space-between [A]······[B]······[C] space-around ··[A]····[B]····[C]·· space-evenly ···[A]···[B]···[C]···
order coloca un elemento antes o después sin tocar el HTML. Todos empiezan con order: 0; los de número más alto van después, y uno negativo va antes que todos:
.destacado { order: -1; } /* el primero de la fila */ .boton-cerrar { order: 1; } /* el último */
⚠️ Atención. El lector de pantalla y el tabulador siguen el orden del HTML, no el visual. Usa order para retoques de diseño, no para reordenar el contenido importante.
align-items coloca a todos en el eje transversal; align-self coloca a uno:
Con flex-wrap: wrap los elementos que no caben pasan a otra línea. wrap-reverse hace lo mismo, pero la línea nueva va antes (arriba en una fila).
flex-flow junta dirección y salto de línea en una propiedad:
.galeria { flex-flow: row wrap; } /* lo mismo que flex-direction: row; flex-wrap: wrap; */
Cuando hay varias líneas, align-content decide cómo se reparten las líneas en el eje transversal. Acepta los mismos valores que justify-content (flex-start, center, space-between…):
En el juego de esta página escribes las propiedades del salón (y de algún gato) y cada gato tiene que acabar en su cojín. La parte 1 repasa lo básico de Flexbox y las partes 2 y 3 usan todo lo de esta lección.
Poner flex-direction: column y seguir usando align-items para mover en vertical: en una columna, la vertical es justify-content. Esperar que align-content haga algo sin flex-wrap: wrap. Usar order para cambiar el orden de lectura: solo cambia lo que se ve.
En la lección anterior de Flexbox colocaste elementos en una fila con justify-content y align-items.
Código del tema: flex-flow: column wrap
En la lección anterior de Flexbox colocaste elementos en una fila con justify-content y align-items. Con cuatro propiedades más resuelves casi cualquier fila o columna: darle la vuelta, cambiar el orden sin tocar el HTML, mover un solo elemento y repartir varias líneas.
flex-direction decide cuál es el eje principal:
| Valor | Eje principal | Empieza en… |
|---|---|---|
row (por defecto) | Horizontal | La izquierda |
row-reverse | Horizontal | La derecha |
column | Vertical | Arriba |
column-reverse | Vertical | Abajo |
Al cambiar la dirección cambian los ejes. En una columna, justify-content mueve en vertical y align-items en horizontal:
.lateral {
display: flex;
flex-direction: column; /* uno debajo de otro */
justify-content: flex-end; /* pegados abajo */
}Con row-reverse, el principio de la fila está a la derecha: justify-content: flex-end lleva los elementos a la izquierda.
Además de space-between y space-around, justify-content admite space-evenly: el mismo espacio entre los elementos y entre ellos y los bordes.
space-between [A]······[B]······[C]
space-around ··[A]····[B]····[C]··
space-evenly ···[A]···[B]···[C]···order coloca un elemento antes o después sin tocar el HTML. Todos empiezan con order: 0; los de número más alto van después, y uno negativo va antes que todos:
.destacado { order: -1; } /* el primero de la fila */
.boton-cerrar { order: 1; } /* el último */⚠️ Atención. El lector de pantalla y el tabulador siguen el orden del HTML, no el visual. Usa order para retoques de diseño, no para reordenar el contenido importante.
align-items coloca a todos en el eje transversal; align-self coloca a uno:
Con flex-wrap: wrap los elementos que no caben pasan a otra línea. wrap-reverse hace lo mismo, pero la línea nueva va antes (arriba en una fila).
flex-flow junta dirección y salto de línea en una propiedad:
.galeria { flex-flow: row wrap; } /* lo mismo que flex-direction: row; flex-wrap: wrap; */Cuando hay varias líneas, align-content decide cómo se reparten las líneas en el eje transversal. Acepta los mismos valores que justify-content (flex-start, center, space-between…):
.etiquetas {
display: flex;
flex-wrap: wrap;
align-content: flex-start; /* las líneas, juntas arriba */
height: 300px;
}La diferencia: align-items coloca cada elemento dentro de su línea; align-content coloca las líneas dentro del contenedor. Con una sola línea, align-content no hace nada.
En el juego de esta página escribes las propiedades del salón (y de algún gato) y cada gato tiene que acabar en su cojín. La parte 1 repasa lo básico de Flexbox y las partes 2 y 3 usan todo lo de esta lección.
flex-direction: column y seguir usando align-items para mover en vertical: en una columna, la vertical es justify-content.align-content haga algo sin flex-wrap: wrap.order para cambiar el orden de lectura: solo cambia lo que se ve.