2.0 KiB
title | localeTitle |
---|---|
Flex Property | Propriedade Flex |
Propriedade Flex
flex
propriedade flex
é uma abreviação para especificar o tamanho de um item flexível. flex-grow
, flex-shrink
e flex-basis
podem ser especificados dentro desta propriedade abreviada.
Esta propriedade não tem efeito se o elemento não for um flex-item
. O item flexível é um elemento que é um filho direto de um pai recipiente com propriedade de exibição como flex
ou inline-flex
.
Sintaxe
Possíveis variações na sintaxe listadas abaixo. flex-grow
e flex-shrink
pegam um número inteiro como valor. flex-basis
leva unidades de tamanho regular, como px, em, rem… etc.
flex: <flex-grow> <flex-shrink> <flex-basis>;
flex: <flex-basis>;
flex: <flex-grow>;
flex: <flex-grow> <flex-basis>;
flex: <flex-grow> <flex-shrink>;
flex-basis
especifica o tamanho do elemento ao longo do eixo principal. Dentro de um contêiner, o eixo principal é definido por flex-direction
. O eixo principal é horizontal quando o flex-direction
é row
. Vertical quando a flex-direction
do flex-direction
é column
.
flex-basis: 20px
a largura inicial do elemento para 20px
se a flex-direction
do flex-direction
fosse row
. A mesma flex-basis
se aplicaria à altura se a fle-direction
for column
.
flex: 20px
significaria automaticamente flex-basis: 20px
, como a propriedade abreviada tem apenas flex-basis
como a propriedade que pode receber um valor com unit.
flex: 2
especifica flex-grow: 2
e o elemento cresceria duas vezes mais ou mais alto que outros elementos com flex-grow: 1
.
flex: 1 2
especifica flex-grow: 1
e flex-shrink: 2
. O elemento cresce para ocupar espaço vazio em proporção com outros elementos com flex-grow: 1
mas encolhe duas vezes menor quando comparado a outros elementos com flex-shrink: 1
quando pressionado contra o espaço.
Mais Informações
- referência de propriedade
flex
no MDN