La propiedad flex es el formato resumido de las propiedades "flex-grow", "flex-shrink" y "flex-basis".
El orden de valores en caso que indiquemos los tres debe ser:
flex: valor del flex-grow valor del flex-shrink valor del flex-basis;
Ejemplos:
flex: 1 0 60%;
Estamos cargando un 1 en la propiedad flex-grow, un 0 en la propiedad flex-shrink y un 60% en flex-basis.
Probar distintos valores y ver como responden las cajas flexibles:
Hay posibilidades de inicializar la propiedad flex con menos de tres valores y que los otros queden con valores por defecto:
flex: 1 2; /* flex-basis queda con su valor por defecto */ flex: 1 20%; /* flex-shrink queda con su valor por defecto */ flex: none; /* se almacenan los valores 0 0 auto*/ flex: auto; /* Especificamos los valores por defecto de cada propiedad */
Problema: Definir un Flexbox con tres items. Inicializar la propiedad flex de cada item.
pagina1.html
<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<meta charset="UTF-8">
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<div id="contenedor1">
<div id="item1">Caja 1</div>
<div id="item2">Caja 2</div>
<div id="item3">Caja 3</div>
</div>
</body>
</html>
estilos.css
#contenedor1{
display: flex;
background-color: #000;
height: 300px;
color:white;
font-size:2rem;
}
#item1 {
flex: 1 1 20%;
background-color: #0078A6;
}
#item2 {
flex: 0 0 60%;
background-color: #0084B6;
}
#item3 {
flex: 0 1 20%;
background-color: #008CC1;
}