Flex - CSS-Tricks

A flexpropriedade é uma subpropriedade do módulo Layout de caixa flexível.

Esta é a abreviação de flex-grow, flex-shrinke flex-basis. O segundo e o terceiro parâmetros ( flex-shrinke flex-basis) são opcionais.

Sintaxe

flex: none | ( ? || ) .flex-item ( /* this */ flex: 1 100px; /* is the same as */ flex-grow: 1; flex-basis: 100px; /* and it leaves the flex-shrink property alone, which would be */ flex-shrink: inherit; /* defaults to 1 */ )

Aqui está o resumo do mapeamento dos valores, dependendo de quantos valores você atribui a eles:

flex: none /* value 'none' case */ flex: /* One value syntax, variation 1 */ flex: /* One value syntax, variation 2 */ flex: /* Two values syntax, variation 1 */ flex: /* Two values syntax, variation 2 */ flex: /* Three values syntax */ flex: inherit

Valores comuns para flex

flex: 0 auto;

Este é o mesmo que flex: initial;ea abreviação para o valor padrão: flex: 0 1 auto. Ele dimensiona o item com base em suas width/ heightpropriedades (ou seu conteúdo, se não for definido).

Isso torna o item flexível inflexível quando há algum espaço livre restante, mas permite que ele encolha ao mínimo quando não há espaço suficiente. As habilidades de alinhamento ou automargens podem ser usadas para alinhar itens flexíveis ao longo do eixo principal.

flex: automático;

Isso é equivalente a flex: 1 1 auto. Cuidado, este não é o valor padrão. Ele dimensiona o item com base em seus width/ heightpropriedades, mas faz com que seja totalmente flexível para que eles absorver qualquer espaço extra ao longo do eixo principal.

Se todos os itens são ou flex: auto, flex: initialou flex: none, qualquer espaço restante depois que os artigos foram dimensionadas serão distribuídos uniformemente para os itens com flex: auto.

flex: nenhum;

Isso é equivalente a flex: 0 0 auto. Ele dimensiona o item de acordo com os seus width/ heightpropriedades, mas faz com que seja totalmente inflexível.

Isso é semelhante, flex: initialexceto que não é permitido encolher, mesmo em uma situação de estouro.

flex:

Equivalente a flex: 1 0px. Isso torna o item flexível flexível e define a base flexível para zero, resultando em um item que recebe a proporção especificada do espaço restante.

Se todos os itens no flex container usarem esse padrão, seus tamanhos serão proporcionais ao fator de flexibilidade especificado.

Demo

A demonstração a seguir mostra um layout muito simples com o Flexbox graças à flexpropriedade:

Aqui está o pedaço de código relevante:

.header, .footer ( flex: 1 100%; ) .sidebar ( flex: 1; ) .main ( flex: 2; )

Primeiro, autorizamos itens flexíveis a serem exibidos em várias linhas com flex-flow: row wrap.

Em seguida, dizemos ao cabeçalho e ao rodapé para ocupar 100% da largura atual da janela de visualização, não importa o quê.

E o conteúdo principal e ambas as barras laterais irão compartilhar a mesma linha, compartilhando o espaço restante da seguinte forma: 66% (2 / (1 + 2)) para o conteúdo principal, 33% (1 / (1 + 2)) para a barra lateral .

Suporte para navegador

• (moderno) significa a sintaxe recente da especificação (por exemplo display: flex;)
• (híbrido) significa uma sintaxe não oficial estranha de 2011 (por exemplo display: flexbox;)
• (antigo) significa a sintaxe antiga de 2009 (por exemplo display: box;)

cromada	Safári	Raposa de fogo	Ópera	IE	Android	iOS
21+ (moderno) 20- (antigo)	3.1+ (antigo)	2-21 (antigo) 22+ (novo)	12,1+ (moderno)	10+ (híbrido)	2.1+ (antigo)	3.2+ (antigo)

O navegador Blackberry 10+ suporta a nova sintaxe.

Para obter mais informações sobre como misturar sintaxes para obter o melhor suporte de navegador, consulte este artigo (CSS-Tricks) ou este artigo (DevOpera).