Cómo usar Flexbox

3865

¿Qué es Flex?
Es una propiedad de CSS que indica la capacidad de un elemento flexible para alterar sus dimensiones y llenar el espacio disponible.
Comencemos con algunos ejemplos usando Flex.

Recuerda que para comenzar a usar ++flex ++ no debemos olvidar poner:

display: flex;

Esta propiedad convierte a un elemento en un contenedor flexible, lo que permite que sus elementos secundarios se comporten de acuerdo con las propiedades flex.

Ahora veremos algunos casos en los que podemos usarla y observar de manera gráfica cómo funciona Flex.

Creamos nuestra base en HTML, crearemos contenedores para ver la diferencias de las propiedades de Flex:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Flex-box</title>
	<link rel="stylesheet" href="./flex.css">
</head>
<body>
    <divclass="contenedor">
    	<divclass="item1"></div>
    	<divclass="item2"></div>
    	<divclass="item3"></div>
    	<divclass="item4"></div>

    </div>
    <divclass="contenedor2">
    	<divclass="item1"></div>
    	<divclass="item2"></div>
    	<divclass="item3"></div>
    	<divclass="item4"></div>

    </div>
   

    </div>
    <divclass="contenedor3">
    	<divclass="item1"></div>
    	<divclass="item2"></div>
    	<divclass="item3"></div>
    	<divclass="item4"></div>

    </div>
    <divclass="contenedor4">
    	<divclass="item1"></div>
    	<divclass="item2"></div>
    	<divclass="item3"></div>
    	<divclass="item4"></div>

    </div>
    <divclass="contenedor5">
    	<divclass="item1"></div>
    	<divclass="item2"></div>
    	<divclass="item3"></div>
    	<divclass="item4"></div>

    </div>
    <divclass="contenedor6">
    	<divclass="item1"></div>
    	<divclass="item2"></div>
    	<divclass="item3"></div>
    	<divclass="item4"></div>

    </div>
   
</body>
</html>

En este bloque de codigo HTML Observamos que creamos contenedores con 4 items cada uno.

También aplicamos este estilo a toda la pagina que tendremos.

*{
	margin: 0;
	box-sizing: border-box;
}

2. Le agregamos propiedades a los _ítems _ que si observamos se repiten en cada contenedor,

.item1{
background-color: #349d4e;
width:40px;
height:50px;
display: flex;
}
.item2{
background-color: #65d965;
width:40px;
height:60px;
display: flex;
}
.item3{
background-color: #99e699;
width:40px;
height:70px;
display: flex;
}
.item4{
background-color: #b8ce90;
width:40px;
height:80px;
display: flex;
}

Ahora vamos por los contenedores, donde veremos la magia

3.Contenedor 1: Usaremos dos propiedades de flex: flex-direction: row; justify-content:flex-end;
Estos dos harán que los elementos secundarios se alinearán hacia el extremo derecho del contenedor flexible.

.contenedor{
height:auto;
width:100%;
padding:40px;
background-color: #ff1493;
display: flex;
flex-direction: row;
justify-content:flex-end;

}

Resultado

4. Contenedor 2: Estaremos usando: ** flex-direction: row; justify-content:space-between;**
Primero lo veremos en una fila y habrá espacio igual entre los elementos secundarios, lo que los colocará al principio y al final del contenedor, dejando un espacio uniforme entre ellos.

.contenedor2{
     height:auto;
     width:100%;
     padding:40px;
     background-color:#00ced1 ;
     display: flex;
     flex-direction: row;
     justify-content:space-between;

}

Resultado

5. Contenedor 3: Estaremos usando : flex-direction: row; justify-content:center;
Principalmente los elementos secundarios se alinearán en el centro del contenedor, dejando un espacio igual alrededor de ellos.

.contenedor3{
height:auto;
width:100%;
padding:40px;
background-color: #ff1493;
display: flex;
flex-direction: row;
justify-content:center;
}

Resultado

6. Contenedor 4: Usamos flex-direction: row;align-items: baseline;
Alineara los elementos secundarios en su línea de base, lo que puede resultar en alturas diferentes según el contenido de cada elemento.

.contenedor4{
     height:auto;
     width:100%;
     padding:40px;
     background-color: #c640ff;
     display: flex;
     flex-direction: row;
     align-items: baseline;

}

Resultado:

7. Contenedor 5: flex-direction: row;justify-content:center;align-items:center;
Se alinearán los elementos secundarios en el centro vertical del contenedor.

.contenedor5{
height:auto;
width:100%;
padding:40px;
background-color: #48b7b6;
display: flex;
flex-direction: row;
justify-content:center;
align-items:center;

}

Resultado

8. Contenedor 6: flex-direction: row;align-items:stretch;
Estos harán que los elementos secundarios se estiren para ocupar todo el espacio vertical del contenedor.

.contenedor6{
     height:auto;
     width:100%;
     padding:40px;
     background-color:#ffdc20;
     display: flex;
     flex-direction: row;
     align-items:stretch;

}

Resultado