A propriedade flex em CSS é uma abreviação de flex-crescer, flex-encolher, e base flexível. Funciona apenas nos itens flexíveis, portanto, se o item do contêiner não for um item flexível, o flexionar propriedade não afetará o item correspondente.
Esta propriedade é usada para definir o comprimento dos itens flexíveis. O posicionamento dos elementos filhos e do contêiner principal é fácil com esta propriedade CSS. É usado para definir como um item flexível irá encolher ou crescer para caber no espaço.
O flexionar propriedade pode ser especificada por um, dois ou três valores.
- Quando existe a sintaxe de valor único, o valor deve ser um número ou palavras-chave como nenhum, automático, ou inicial .
- Quando existe a sintaxe de dois valores, o primeiro valor deve ser um número (usado como crescimento flexível ), o segundo valor pode ser um número (usado para flexível-encolhível ) ou um valor de largura válido (usado como base flexível ).
- Quando há sintaxe de três valores, os valores devem seguir a ordem: a número para o crescimento flexível, a número para o flex-encolher, e um válido largura valor para base flexível .
Sintaxe
flex: flex-grow flex-shrink flex-basis | auto | none | initial | inherit;
Valores de propriedade
crescimento flexível: É um número positivo sem unidade que determina o fator flex-grow. Ele especifica quanto o item crescerá em comparação com outros itens flexíveis. Valores negativos não são permitidos. Se for omitido, então ele define o valor 1 .
flex-encolher: É o número positivo sem unidade que determina o fator de contração flexível. Ele especifica quanto o item diminuirá em comparação com outros itens flexíveis. Valores negativos não são permitidos. Se for omitido, então ele define o valor 1 .
base flexível: É o comprimento em unidades relativas ou absolutas que define o comprimento inicial do item flexível. É usado para definir o comprimento do item flexível. Seus valores podem ser carro, herdar, ou um número seguido pelas unidades de comprimento, como em, px, etc. Valores negativos não são permitidos. Se for omitido, então ele define o valor 0 .
auto: Este valor da propriedade flex é equivalente a 1 1 automático .
nenhum: Este valor da propriedade flex é equivalente a 0 0 automático . Não aumenta nem diminui os itens flexíveis.
inicial: Ele define a propriedade com seu valor padrão. É equivalente a 0 0 automático .
herdar: Ele herda a propriedade de seu elemento pai.
Exemplo
Neste exemplo, existem três contêineres, cada um com três itens flexíveis. O largura e a altura dos recipientes são 300 pixels e 100 pixels .
Estamos aplicando o flexível: 1; para os itens flexíveis do primeiro contêiner, flexível: 0 50px; para os itens flexíveis do segundo contêiner, e flexionar: 2 2; aos itens flexíveis do terceiro contêiner.
CSS flex Property .container { width: 200px; height: 100px; border: 1px solid black; display: flex; margin: 15px; background-color: blue; } .flex-item{ flex: 1; // unitless number: flex-grow } .flex-item1{ flex: 0 50px; // flex-grow, flex-basis } .flex-item2{ flex: 2 2; // flex-grow, flex-shrink } .flex-item, .flex-item1, .flex-item2 { background-color: lightblue; margin: 4px; } <h3> flex: auto; </h3> <h3> flex: 0 1 30px; </h3> Teste agora Saída
