Flexbox - Flexibilidad
base flexible
Usamos el flex-basis propiedad para definir el tamaño predeterminado del elemento flexible antes de que se distribuya el espacio.
El siguiente ejemplo demuestra el uso de la propiedad de base flexible. Aquí estamos creando 3 cajas de colores y fijando su tamaño a 150 px.
<!doctype html>
<html lang = "en">
<style>
.box{
font-size:15px;
padding:15px;
}
.box1{background:green; flex-basis:150px; }
.box2{background:blue; flex-basis:150px;}
.box3{background:red; flex-basis:150px;}
.container{
display:flex;
height:100vh;
align-items:flex-start;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
</div>
</body>
</html>Producirá el siguiente resultado:
crecimiento flexible
Usamos el flex-grow propiedad para establecer el flex-growfactor. En caso de exceso de espacio en el contenedor, especifica cuánto debe crecer un elemento flexible en particular.
<!doctype html>
<html lang = "en">
<style>
.box{
font-size:15px;
padding:15px;
}
.box1{background:green; flex-grow:10; flex-basis:100px; }
.box2{background:blue; flex-grow:1; flex-basis:100px; }
.box3{background:red; flex-grow:1; flex-basis:100px; }
.container{
display:flex;
height:100vh;
align-items:flex-start;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
</div>
</body>
</html>Producirá el siguiente resultado:
flexión-encogimiento
Usamos la propiedad flex-shrink que se usa para establecer la flexión shrink-factor. En caso de que no haya suficiente espacio en el contenedor, especifica cuánto debe encogerse un elemento flexible.
<!doctype html>
<html lang = "en">
<style>
.box{
font-size:15px;
padding:15px;
}
.box1{background:green; flex-basis:200px; flex-shrink:10}
.box2{background:blue; flex-basis:200px; flex-shrink:1}
.box3{background:red; flex-basis:200px; flex-shrink:1}
.container{
display:flex;
height:100vh;
align-items:flex-start;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
</div>
</body>
</html>Producirá el siguiente resultado:
flexionar
Existe una forma abreviada de establecer valores para estas tres propiedades a la vez; se llamaflex. Con esta propiedad, puede establecer valores para flex-grow, flex-shrink y valores de base flexible a la vez. Aquí está la sintaxis de esta propiedad.
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}