Flexbox - Flexibilité
base flexible
Nous utilisons le flex-basis propriété pour définir la taille par défaut de l'élément flexible avant la distribution de l'espace.
L'exemple suivant illustre l'utilisation de la propriété flex-based. Ici, nous créons 3 boîtes colorées et fixons leur taille à 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>Il produira le résultat suivant -
Flex-Grow
Nous utilisons le flex-grow propriété pour définir la flex-growfacteur. En cas d'espace excessif dans le conteneur, il spécifie la croissance d'un élément flexible particulier.
<!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>Il produira le résultat suivant -
flex-shrink
Nous utilisons la propriété flex-shrink est utilisée pour définir le flex shrink-factor. Dans le cas où il n'y a pas assez d'espace dans le conteneur, il spécifie combien un élément flexible doit être réduit.
<!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>Il produira le résultat suivant -
fléchir
Il existe un raccourci pour définir les valeurs de ces trois propriétés à la fois; on l'appelleflex. À l'aide de cette propriété, vous pouvez définir simultanément des valeurs flex-grow, flex-shrink et flex-base. Voici la syntaxe de cette propriété.
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}