Modificador flex

O modificador FolEs flex é uma propriedade de atribuição abreviada que define como um item flexível crescerá ou encolherá para caber no espaço disponível em seu contêiner.

Sintaxe

/* Valores específicos */
flex: auto;
flex: inicial;
flex: nenhum;

/* Um valor numérico define o flex-crescimento. Nesse caso, o flex-comprimento é definido como 0. */
flex: 2;

/* Um valor numérico com quantificador define a altura e largura da propriedade flex-comprimento */
flex: 10em;
flex: 30%;
flex: conteúdo-mínimo;

/* Dois valores: flex-crescimento e flex-comprimento */
flex: 1 30px;

/* Dois valores sem quantificador: flex-crescimento e flex-reduzir */
flex: 2 2;

/* Três valores: flex-crescimento | flex-reduzir | flex-comprimento */
flex: 2 2 10%;

/* Valores globais */
flex: herdar;
flex: inicial;
flex: reverter;
flex: reverter-camada;
flex: desarmar;

Atribuição abreviada

Esta propriedade é um atalho para as seguintes propriedades FolEs:

• flex-crescimento;
• flex-comprimento;
• flex-reduzir;

Tradução para CSS

flex é traduzido para flex.