alinear contenido Esto alinea las líneas de un contenedor flexible cuando hay
espacio adicional en el eje transversal, de manera similar a
cómo justify-content se alinean los elementos individuales
dentro del eje principal.
Nota: Esta propiedad solo tiene efecto en contenedores
flexibles de varias líneas, donde flex-wrap se establece en
wrapo wrap-reverse). Un contenedor flexible de una sola línea
(es decir, donde flex-wrap se establece en su valor
predeterminado, no-wrap) no reflejará align-content.
.container {
align-content: flex-start | flex-end | center | space-between
| space-around | space-evenly | stretch | start | end |
baseline | first baseline | last baseline + ... safe | unsafe;
}
normal(predeterminado): los elementos se empaquetan en su posición predeterminada como si no
se hubiera establecido ningún valor.
flex-start/ start: elementos empaquetados hasta el inicio del contenedor. El (más compatible) flex-
start respeta la dirección flex-direction mientras que start respeta la writing-modedirección.
flex-end/ end: elementos empaquetados hasta el final del contenedor. El (más soporte) flex-end
respeta la dirección flex-direction mientras que el final respeta la writing-modedirección.
center: elementos centrados en el contenedor
space-between: elementos distribuidos uniformemente; la primera línea está al comienzo del
contenedor mientras que la última está al final
space-around: elementos distribuidos uniformemente con el mismo espacio alrededor de cada
línea
space-evenly:Los artículos están distribuidos uniformemente con el mismo espacio a su alrededor.
stretch:las líneas se estiran para ocupar el espacio restante
brecha, brecha entre filas, brecha entre columnas
La gap propiedad controla explícitamente el espacio entre
elementos flexibles. Aplica ese espaciado solo entre elementos
que no están en los bordes externos.
.container {
display: flex;
...
gap: 10px;
gap: 10px 20px; /* row-gap column gap */
row-gap: 10px;
column-gap: 20px;
}
El comportamiento podría considerarse como un canal mínimo ,
como si el canal fuera más grande de alguna manera (debido a
algo como justify-content: space-between;), entonces el espacio
solo tendría efecto si ese espacio terminara siendo más pequeño.
No es exclusivo para flexbox, gap también funciona en diseños de
cuadrícula y de varias columnas.
orden
De forma predeterminada, los elementos flexibles se disponen
en el orden de origen. Sin embargo, la order propiedad controla
el orden en el que aparecen en el contenedor flexible.
.item {
order: 5; /* default is 0 */
}
Los elementos con el mismo orderorden vuelven al orden
original.
crecimiento flexible Esto define la capacidad de un elemento flexible de crecer si es
necesario. Acepta un valor sin unidad que sirve como
proporción. Indica qué cantidad de espacio disponible dentro
del contenedor flexible debe ocupar el elemento.
Si todos los elementos tienen el flex-grow valor 1, el espacio
restante en el contenedor se distribuirá equitativamente entre
todos los elementos secundarios. Si uno de los elementos
secundarios tiene un valor de 2, ese elemento secundario
ocupará el doble de espacio que cualquiera de los otros (o al
menos lo intentará).
.item {
flex-grow: 4; /* default 0 */
}
Los números negativos no son válidos.
flexibilización-encogimiento
Esto define la capacidad de un elemento flexible de encogerse si es necesario.
.item {
flex-shrink: 3; /* default 1 */
}
base flexible
Esto define el tamaño predeterminado de un elemento antes de que se distribuya el espacio
restante. Puede ser una longitud (por ejemplo, 20 %, 5rem, etc.) o una palabra clave. La auto
palabra clave significa "mira mi propiedad de ancho o alto" (que se hacía temporalmente con la
main-size palabra clave hasta que quedó obsoleta). La content palabra clave significa "ajustar el
tamaño en función del contenido del elemento"; esta palabra clave aún no tiene un buen soporte,
por lo que es difícil probarla y es más difícil saber qué hacen sus hermanas max-content, min-
contenty fit-content.
.item { Si se configura en 0, no se tiene en cuenta el espacio adicional
flex-basis: | auto; /* default auto */ alrededor del contenido. Si se configura en auto, el espacio
} adicional se distribuye en función de su flex-grow valor
Doblar (Flex)
Esta es la abreviatura de flex-grow, flex-shrinky flex-basiscombinado. El segundo y tercer
parámetro ( flex-shrinky flex-basis) son opcionales. El valor predeterminado es 0 1 auto,
pero si lo configura con un único valor numérico, como flex: 5;, eso cambia flex-basisa 0 %,
por lo que es como configurar flex-grow: 5; flex-shrink: 1; flex-basis: 0%;.
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
Se recomienda utilizar esta propiedad abreviada en lugar de configurar las propiedades
individuales. La abreviatura configura los demás valores de forma inteligente.
alinearse
Esto permite que la alineación predeterminada (o la especificada por align-items) se anule
para elementos flexibles individuales.
Consulte la align-ítems explicación para comprender los valores disponibles.
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
Tenga en cuenta que floaty no tienen efecto en un elemento flexible clear. vertical-align
Probemos algo diferente. Imaginemos que tenemos un elemento de navegación alineado a la derecha
en la parte superior de nuestro sitio web, pero queremos que esté centrado en las pantallas de tamaño
mediano y en una sola columna en los dispositivos pequeños. Es bastante fácil.
.navigation {
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
}
/* Medium screens */
@media all and (max-width: 800px) {
.navigation {
justify-content: space-around;
}
}
/* Small screens */
@media all and (max-width: 500px) {
.navigation {
flex-direction: column;
}
}
Probemos algo aún mejor y juguemos con la flexibilidad de los elementos flexibles. ¿Qué tal un diseño de
3 columnas que priorice los dispositivos móviles con encabezado y pie de página de ancho completo e
independiente del orden de origen?
.wrapper {
display: flex;
flex-flow: row wrap;
}
/* Le decimos a todos los elementos que tengan 100% de ancho, mediante base flexible*/
.wrapper > * {
flex: 1 100%;
}
/* Nos basamos en el orden de origen para un enfoque centrado en los dispositivos móviles
* en este caso:
* 1. header
* 2. article
* 3. aside 1
* 4. aside 2
* 5. footer
*/
/* Pantallas medias*/
@media all and (min-width: 600px) {
.aside { flex: 1 auto; }
} /* Le decimos a ambas barras laterales que compartan una
fila*/
/* Pantallas grandes */
@media all and (min-width: 800px) {
.main { flex: 3 0px; }
.aside-1 { order: 1; }
.main { order: 2; }
.aside-2 { order: 3; }
.footer { order: 4; }
}
/* Invertimos el orden de la primera barra lateral y principal
Y dígale al elemento principal que tome el doble de ancho que las otras dos barras laterales
*/
Se debiera ver algo parecido a esto
