CSS - Flexbox

Flexbox - justify-content: se indica cómo se colocan los justificados y márgenes.

En flexbox hay dos ejes, el principal
(horizontal, por defecto) y el vertical: flex-start elementos a partir del eje principal
Indican cómo se van a posicionar los
ítems.
flex-end Elementos al final del eje principal
Para comenzar a usar, en el contenedor se establece lo siguiente: display: flex;
Con (inline-flex) para elementos inline-block donde sus hijos siguen reglas de flexbox.
center centra los objetos en el contenedor, respecto
al eje principal
Flexbox – Contenedores
- flex-direction: el eje se establecería con la propiedad: flex-direction:
row es la opción por defecto, en el eje horizontal
space-between Los elementos se distribuyen con
un espacio proporcional entre ellos, con los objetos de
column Se colocan en el eje vertical.
los extremos en los bordes

row-reverse en eje horizontal pero en orden contrario space-around igual que el anterior pero también
dejando espacio en los extremos.
column-reverse en eje vertical pero en orden contrario

- flex-wrap: Indica si queremos saltos de línea entre los elementos si estos no caben en - align-items: Funciona igual que la anterior, pero refiriéndose al eje secundario.
el espacio disponible. (Por defecto, todo en eje horizontal en una fila). o row.
nowrap (por defecto) sin saltos de línea flex-start al inicio del eje secundario

wrap si no caben, en la línea siguiente

flex-end al final del eje secundario

center centrados en el eje secundario

wrap-reverse hay salto de línea, pero al contrario, hacia arriba

stretch ocupa el tamaño total del eje secundario,

- flex-flow: Define a la vez las dos propiedades anteriores. Por defecto row nowrap
salvo que se indique que el elemento tenga tamaño
flex-flow: valor_flex-direction valor_flex-wrap; diferente

baseline alinea según el texto (visible si tienen

diferentes tamaños)

1
CSS - Flexbox
- align-content: Solo aplica cuando hay varias líneas e indica cómo se separan y Flexbox – Items
alinean respecto al eje secundario.
- flex-grow: definen cómo distribuir el espacio del contenedor, el valor es numérico
e indica la proporción de espacio a utilizar:
flex-start pegadas entre si (si no hay margen) flex-grow: valor_numerico;

Por ejemplo, tenemos cinco elementos, únicamente con la propiedad display: flex;
establecida en el contenedor:

flex-end igual, pero desde el final del eje secundario Si establecemos:

div:nth-of-type(1) {flex-grow: 1;}
div:nth-of-type(2) {flex-grow: 3;}
div:nth-of-type(3) {flex-grow: 1;}
center pegadas entre si en el centro div:nth-of-type(4) {flex-grow: 1;}
div:nth-of-type(5) {flex-grow: 1;}

El flexbox se divide en 1 + 3 + 1 + 1 + 1 = 7 trozos y cada trozo ocupa lo que se indica.

stretch ocupa el tamaño disponible Con:

div:nth-of-type(1) {flex-grow: 1;}
div:nth-of-type(2) {flex-grow: 3;}
div:nth-of-type(3) {flex-grow: 1;}
space-between reparten el espacio entre ellas
div:nth-of-type(4) {flex-grow: 8;}
div:nth-of-type(5) {flex-grow: 1;}

Serán 14 trozos.

space-around reparten el espacio entre y fuera de También, podemos solamente indicar el flex-grow: 1; únicamente a un elemento que
ellas ocuparía todo el espacio sobrante:

div:nth-of-type(5) {flex-grow: 1;}

2
CSS - Flexbox
- align-self: modifica el valor de align-items del contenedor principal. Ejemplo completo:
Tenemos una serie de tarjetas:
flex-start al inicio del eje secundario <div class="contenedor">
flex-end al final del eje secundario <article class="item">
center centrados en el eje secundario
<img src="img/1.png">
stretch ocupa el tamaño total del eje secundario,
baseline alinea según el texto </article>
initial o auto Según se indica en el contenedor <article class="item">
<img src="img/2.png">
- flex-shrink: Indica que encogen su tamaño, a mayor valor (por defecto 1), </article>
encogen más. <article class="item">
flex-shrink: 2; Indica que el elemento ocupará la mitad de lo normal. (1/2) <img src="img/3.png">
</article>
flex-shrink: 3; Un tercio. (1/3)…
<article class="item">
- flex-basis: Indica las dimensiones de los elementos teniendo en cuenta varias <img src="img/4.png">
posibilidades. En PX, porcentaje etc. </article>
<article class="item">
<img src="img/5.png">
flex-end al final del eje secundario
center centrados en el eje secundario </article>
stretch ocupa el tamaño total del eje secundario, <article class="item">
baseline alinea según el texto <img src="img/6.png">
initial o auto Según se indica en el contenedor </article>
</div>

.contenedor {
display: flex; /* Iniciamos el flexbox*/
flex-
wrap: wrap; /* si no hay espacio, en la fila siguiente */
justify-content: space-between; /* espacio sobrante entre
elementos*/
}