1 FlexBox

Introducción
Uno de los problemas más grandes de Css es la de colocar elementos en una página,
puede ser por inexperiencia del programador o porque Css se ha quedado un poco
obsoleto con respecto a propiedades para posicionar elementos en los diferentes
dispositivos móviles de diferentes resoluciones teléfonos, tablets.
Por otra parte debemos tener en cuenta las compatibilidades (los soportes) que
ofrecen los navegadores con respecto a esos atributos.
Uno de estos casos es de Flexbox, cuyo soporte se ha ido aumentado

Ejemplo de uso

2.1.- Creamos un elemento div, de clase contendor con tres elementos div con
clase item item-1, item item-2 e item item-3 (contenido de los ítems 1, 2 y 3
respectivamente)

<div class="contenedor">
<div class="item item-1">1 </div>
<div class="item item-2">2 </div>
 <div class="item item-3">3 </div>
</div>
2.2.- En la hoja de estilos vamos a indicar color de fondo del div contenedor Gris.
.contenedor{
background:grey;
}
2.3.- A los item de la lista , color de letra blanco, tamaño 26px , alineación
centrada y alto interlineado de 50px, por último un margen de 10px. ancho y alto de
50px.

.item {
width:50px;
height:50px;
margin:10px;
color:White;
font-size:32px;
text-align:center;
line- height:50px;
}
2.4.- A cada item le vamos a dar un color, de más claro a más oscuro.
.item-1 {
background:navy;
}

.item-2 {
background:blue;
}
.item-3 {
background:SteelBlue;
}

2.5.- PROPIEDADES DENTRO DEL ELEMENTO CONTENEDOR

 Display:flex
 flex-direction: row, column, row-reverse, column-reverse
 Justify-content: flex-start, flex-end, center, space-between, space around
 Align-items: flex-start, flex-end, center,strech

2.5.1.- Dentro del contenedor incluir Display:flex

.contenedor{
background:grey;
display:flex;
}
(muy similar pongo en .item diplay:inline-block;)

Con esto estamos diciendo que el contenedor es un elemento flex y que contiene
ítems, flexibles.

Si ponemos display:inline-flex. Vemos que el contenedor se adapta a su contenido

Lo dejamos con Display:flex

De momento vamos a aplicar propiedades al contenedor, de

manera que afectará a su contenido.

2.5.2.- Propiedad flex-direction

flex-direction:row;

Por defecto tiene el valor row ( dirección de fila)

2.5.3.- si ponemos por dirección de columnas

flex-direction:column;

2.5.4.- si ponemos reverse

Mostrar patallazo: flex-direction:row-reverse;

flex-direction:column-reverse;

Lo dejamos finalmente con flex-direction: row;

2.5.5.- Propiedad Justify-content:

Justify-content:flex-start. Para indicar que los elementos se empiezan a colocar

desde el inicio del contenedor. Es valor por defecto.

Mostrar patallazo: Justify-content:flex-end

Mostrar pantallazo: Justify-content:center;

Mostrar pantallazo: Justify-content:space-between (establece un espacio entre

ellos)

Mostrar pantallazo: Justify-content:space-around (establece un espacio a izquierda y

derecha de cada elemento)

2.5.6- Align-items:

Para notar los efectos aumentamos el alto del contendor a 200px.

Por defecto su valor es Align-items:flex-start;

Mostrar pantallazo si lo cambiamos a Align-items:flex-end.

Mostrar pantallazo si lo cambiamos a centrado, Align-items:center

 Align-items:strech (estirar, hasta ocupar espacio disponible). Su efecto se ve, si los
ítems no tienen aplicado el height:50px;
Mostrar pantallazo.

Volvemos a dejarlo centrado y los ítems con height:50px;

2.6.- PROPIEDADES DENTRO DE ELEMENTOS

2.6.1.- Teniendo todos los ítems centrados en el contendor con align-items:center .

Puedo alinear uno en concreto por ejemplo el 3 en la parte superior

Align-self:flex-start

Align-self:flex-end

2.6.2.- Order

.item-1 {
background:navy;
order:3;
}
2.7.-
.item-2 { MÁS PROPIEDADES DENTRO DE ELEMENTOS.
background:blue;
} Flex-basis
.item-3 {
Flex-grow
background:SteelBlue;
}
Flex-shrink
Muy bien explicado aquí

https://developer.mozilla.org/es/docs/Web/CSS/CSS_Flexible_Box_Layout/
Conceptos_Basicos_de_Flexbox#La_propiedad_flex-basis

Debemos considerar el concepto de espacio disponible. Lo que hacemos cuando

cambiamos el valor de alguna de estas propiedades (flex-basis, flex-shrink, Flex-grow)
es cambiar la forma que se distribuye el espacio disponible entre nuestros ítems

<div class="contenedor"> .contenedor{

<div class="elemento elem1">1</div> background: grey;
<div class="elemento elem2">2</div> height: 400px;
<div class="elemento elem3">3</div> width: 800px;
</div> display:flex;
}
.elemento{
height: 50px;
width: 80px;
background: coral;
color:white;
font-size:30px;
}

Tenemos contenedor de 800, ocupados (80+3= 240), nos quedan 560 de espacio libre.
Y Si no cambiamos los valores iniciales entonces flexbox colocará ese espacio después
del último ítem.
2.7.1.- Flex-basis

El valor inicial de esta propiedad es auto .En el ejemplo de arriba, todos los ítems
tienen un ancho de 80 pixeles así que este es usado como flex-basis.
Si los ítems no tienen un tamaño entonces el tamaño de su contenido es usado como
flex-basis ( si quito de .elemento width: 80px, el resultado es que flex-basis, es el
tamaño del contenido, los ítems tienen el espacio necesario para desplegar su
contenido.)
 Si por ejemplo ponemos un %, será del tamaño principal de un contenedor flexible padre

.elem1{
flex-basis:50%;
}
.elem2{
flex-basis:10%;
}
.elem3{
flex-basis:25%;
}

Flex-grow

Si le damos a todos los ítems del ejemplo anterior un valor flex-grow de 1 entonces el

espacio disponible en el contenedor flex será compartido igualitariamente entre estos
.contenedor{
ítems y se ajustarán para llenar el contenedor sobre el eje principal.
background: grey;
height: 400px;
width: 800px;
display:flex;
}
.elemento{
<div class="contenedor"> height: 50px;
<div class="elemento elem1">1</div> width: 80px;
<div class="elemento elem2">2</div> color:white;
<div class="elemento elem3">3</div> font-size:30px;
</div> }
.elem1{
background: coral;
flex-grow:1;
}
.elem2{
background: green;
flex-grow:1;
}
.elem3{
background: coral;
flex-grow:1;
}
 Podemos usar flex-grow apropiadamente para distribuir el espacio en proporciones. Si
otorgamos al primer ítem un valor flex-grow de 2 y a los otros un valor de 1,
entonces 2 partes serán dadas al primer ítem  y 1 parte para cada uno de los restantes

560/2= 280 para el primer item

Y 140 para cada uno de los ítems restantes
Es decir primer item medirá 80 + 280 = 360
Los otros ítems 80 +140 =220
Flex-shrink
Así como la propiedad flex-grow se encarga de añadir espacio sobre el eje principal,
la propiedad flex-shrink controla como se contrae
Si el espacio disponible es negativo (el tamaño del contenedor es menor a la suma de
los tamaños de los items), de forma predeterminada los items se encogen en
proporciones iguales para caber en una sola línea 
Con la propiedad flex-shrink se controla cómo se encogerán los elementos.

.contenedor{
<div class="contenedor"> background: grey;
<div class="elemento elem1">1</div> height: 400px;
<div class="elemento elem2">2</div> width: 800px;
<div class="elemento elem3">3</div> display:flex;
</div> }
.elemento{
height: 50px;
width: 300px;
color:white;
font-size:30px;
}
.elem1{
background: coral;
}
.elem2{
background: green;
}
.elem3{
background: coral;
}

Tenemos un espacio de 800 y tres elementos de 300, por lo

tanto tenemos un espacio de -100

La unidad (unit shrink) se define dividiendo el espacio

disponible entre la suma de los valores de flex-shrink,
es decir: .contenedor{
background: grey;
100/ (6+1+1) = 12,5 height: 400px;
width: 800px;
Tamaño Elem1 : 300 – (6*12,5) = 225 display:flex;
AMPLIACIÓN DEL JUSTIFY-CONTENT

En cuanto a la alineación horizontal de los elementos en Flexbox, encontramos la

propiedad “justify-content“, que alinea los elementos a lo largo del eje principal de
su contenedor, pero a diferencia de la alineación de un texto, en Flexbox hay que
tener en cuenta también la dirección de los elementos. 

justify-content:flex-start; -> Alinea los elementos en horizontal desde el inicio de la

dirección del eje principal de su contenedor (partiendo desde el inicio de la línea).
Este es el valor por defecto. Es importante destacar que, como veremos más
adelante, la dirección establecida en “flex-direction” afecta a la alineación.
justify-content:flex-end; -> Alinea los elementos en horizontal desde el final de la
dirección del eje principal de su contenedor (partiendo desde el final de la línea)
justify-content:center; -> Alinea los elementos al centro del eje principal de su
contenedor. Similar a un texto alineado al centro.
justify-content:space-between; -> Alinea los elementos justificándolos a lo largo
del eje principal de su contenedor. Similar a un texto justificado. Los elementos
laterales se pegan a los extremos y el resto se distribuyen a lo largo del eje principal
dejando el mismo espacio entre ellos.
justify-content:space-around; -> Alinea los elementos distribuyendo sus centros de
forma horizontal a lo largo del eje principal de su contenedor, dejando el mismo
espacio lateral de separación al comienzo, al final y entre ellos.

https://ed.team/blog/guia-definitva-de-flexbox-1-main-axis-y-cross-axis

https://www.yunbitsoftware.com/blog/2017/03/30/flexbox-css3-tutorial-
descripcion-ejemplos-html/