Flexbox - Flexibilidade
base flexível
Nós usamos o flex-basis propriedade para definir o tamanho padrão do flex-item antes que o espaço seja distribuído.
O exemplo a seguir demonstra o uso da propriedade flex-basis. Aqui estamos criando 3 caixas coloridas e fixando seu tamanho em 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>Isso produzirá o seguinte resultado -
flex-grow
Nós usamos o flex-grow propriedade para definir o flex-growfator. Em caso de excesso de espaço no contêiner, ele especifica quanto um determinado item flexível deve crescer.
<!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>Isso produzirá o seguinte resultado -
flex-encolher
Usamos a propriedade flex-shrink é usada para definir o flex shrink-factor. Caso não haja espaço suficiente no contêiner, especifica quanto um flex-item deve encolher.
<!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>Isso produzirá o seguinte resultado -
flex
Existe um atalho para definir valores para todas essas três propriedades de uma vez; é chamadoflex. Usando esta propriedade, você pode definir valores para flex-grow, flex-shrink e flex-basis valores de uma vez. Aqui está a sintaxe dessa propriedade.
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}