2.0 KiB
| title | localeTitle |
|---|---|
| Flex-grow | Flex-grow |
Flex-Grow
A propriedade flex-grow é uma propriedade flexbox que permite especificar a alocação de espaço livre para contêineres dentro de um contêiner flexível. Ele fornece uma solução para todo esse espaço indesejado!
Isso vai transformar seu contêiner
para isso
O que acabou de acontecer?
Bem, nós adicionamos duas coisas à sintaxe do css.
HTML
<p class = "ten">1</p>
<p class = "twenty">2</p>
CSS
body {
display:flex;
}
p {
flex-grow: 1;
}
Duas coisas aconteceram
- O contêiner pai foi convertido em um display flexível por
display:flex - O "espaço livre" remanescente foi então alocado entre os p contentores remanescentes em uma razão igual, já que cada um possui uma propriedade flex-grow de 1.
O que acontece se tivermos contêineres p com diferentes propriedades flex-grow?
Vamos ver um exemplo.
Primeiro vamos criar dois parágrafos e ativar a exibição: flex;
Observe algumas coisas
- O esquema de cores é bom
- Há algum espaço vazio à direita das duas caixas.
Esse espaço vazio é o "espaço livre" que será alocado para cada um dos diferentes parágrafos posteriormente, dependendo de suas propriedades flex-grow.
Para ver isso em ação, vamos dar ao primeiro uma classe de "dez" e uma propriedade de flex-grow de 1. Vamos também dar ao segundo uma classe de "vinte" e uma propriedade flex-grow de 2.
Observe algumas coisas
- O tamanho do segundo não é o dobro do primeiro, apesar de ter uma propriedade flex-grow que é o dobro da primeira.
- Todo o espaço está cheio. (Algumas margens foram adicionadas ao lado para permitir que ele seja visto com mais clareza.)
À medida que redimensionamos a tela, também descobrimos que a primeira encolhe a duas vezes a velocidade da segunda.
