Propriedade CSS flex
A propriedade CSS flex define quanto os itens devem crescer ou encolher dentro do contêiner. Veja alguns exemplos.
A propriedade flex define os componentes de um comprimento flexível. É uma abreviação das seguintes propriedades:
Todos os três componentes são opcionais na declaração abreviada. Quando omitidos, flex-grow assume o valor padrão 1, flex-shrink assume o valor padrão 1, e flex-basis assume o valor padrão auto. Observe que o fator flex-shrink é multiplicado pelo valor de flex-basis ao distribuir espaço negativo.
A propriedade flex é uma das propriedades do CSS3.
Esta propriedade faz parte do módulo Flexible Box Layout. Se não houver itens flexíveis, a propriedade flex não terá efeito.
A palavra-chave auto é equivalente a 1 1 auto. Ela dimensiona o item com base nas propriedades width/height. Se a propriedade de tamanho principal do item for definida como auto, o item flex será dimensionado com base no seu conteúdo.
A palavra-chave initial é equivalente a 1 0 auto. Ela dimensiona o item com base nas suas propriedades de width/height (ou no seu conteúdo, se não estiver definido). Isso torna o item flex inflexível quando há espaço livre disponível, e ele não encolherá quando não houver espaço suficiente. As técnicas de alinhamento ou margens automáticas são usadas para alinhar os itens flex ao longo do eixo principal.
A palavra-chave none é equivalente a 0 0 auto. Ela dimensiona o item de acordo com as propriedades width e height. É completamente inflexível.
Nota: Os valores iniciais de flex-grow e flex-shrink diferem dos seus valores padrão quando não são incluídos na declaração abreviada flex, para que possam acomodar melhor os casos mais comuns.
| Valor Inicial | 0 1 auto |
|---|---|
| Aplica-se a | Itens flex, incluindo pseudo-elementos em fluxo. |
| Herdado | Não. |
| Animável | Sim. |
| Versão | CSS3 |
| Sintaxe DOM | Object.style.flex = "1"; |
Sintaxe
Sintaxe da Propriedade CSS flex
flex: flex-grow | flex-shrink | flex-basis | auto | initial | inherit;Os valores podem ser especificados em qualquer ordem. Ao usar flex-basis, você também pode aplicar restrições de min-width ou min-height para impedir que o item encolha abaixo de um tamanho especificado.
Exemplo da propriedade flex:
Exemplo da Propriedade CSS flex
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box {
width: 350px;
height: 200px;
padding-left: 0;
list-style-type: none;
border: 1px dashed black;
display: flex;
}
.box div {
flex: 1;
}
.green {
background-color: #8ebf42;
}
.blue {
background-color: #1c87c9;
}
.gray {
background-color: #666666;
}
</style>
</head>
<body>
<h2>Flex property example</h2>
<div class="box">
<div class="green">GREEN</div>
<div class="blue">BLUE</div>
<div class="gray">GRAY</div>
</div>
</body>
</html>Resultado
Exemplo da propriedade flex com o valor "flex-grow":
Exemplo da Propriedade CSS flex com o valor flex-grow
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box {
width: 320px;
height: 120px;
border: 1px solid #666;
display: flex;
}
.box div:nth-of-type(1) {
flex-grow: 1;
}
.box div:nth-of-type(2) {
flex-grow: 4;
}
.box div:nth-of-type(3) {
flex-grow: 1;
}
.box div:nth-of-type(4) {
flex-grow: 1;
}
.box div:nth-of-type(5) {
flex-grow: 1;
}
</style>
</head>
<body>
<h2>Flex-grow example</h2>
<div class="box">
<div style="background-color: #eee;"></div>
<div style="background-color: #1c87c9;"></div>
<div style="background-color: #8ebf42;"></div>
<div style="background-color: #ccc;"></div>
<div style="background-color: #666;"></div>
</div>
</body>
</html>Exemplo da propriedade flex com o valor "flex-shrink":
Exemplo da Propriedade CSS flex com o valor flex-shrink
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box {
width: 320px;
height: 120px;
border: 1px solid #666;
display: flex;
}
.box div {
flex-grow: 1;
flex-shrink: 2;
flex-basis: 100px;
}
.box div:nth-of-type(2) {
flex-shrink: 5;
}
</style>
</head>
<body>
<h2>Flex-shrink example</h2>
<div class="box">
<div style="background-color: #eeeeee;"></div>
<div style="background-color: #1c87c9;"></div>
<div style="background-color: #8ebf42;"></div>
<div style="background-color: #cccccc;"></div>
<div style="background-color: #666666;"></div>
</div>
</body>
</html>Padrões abreviados comuns
Alguns valores de flex surgem com tanta frequência que vale a pena memorizá-los:
flex: 1(=1 1 0) — o item cresce e encolhe livremente, partindo de um tamanho base de0. Aplique-o a todos os filhos para dividir o contêiner em colunas de largura igual, independentemente do conteúdo.flex: auto(=1 1 auto) — cresce e encolhe, mas o tamanho inicial é o conteúdo/widthdo item. Os itens compartilham o espaço restante, mas mantêm suas proporções naturais.flex: none(=0 0 auto) — um item fixo e inflexível. Use-o para uma barra lateral ou botão que deve manter seu tamanho enquanto os irmãos se flexionam ao redor dele.flex: 0 0 200px— fixo em200px: não cresce nem encolhe, útil para uma coluna de largura fixa.
Um erro comum: flex: 1 usa um flex-basis de 0, portanto a largura intrínseca do conteúdo é ignorada e as colunas se tornam verdadeiramente iguais. Se, em vez disso, você quiser colunas dimensionadas pelo seu conteúdo, mas ainda capazes de se expandir, use flex: auto.
Valores
| Valor | Descrição |
|---|---|
| flex-grow | Especifica quanto o item crescerá em relação ao restante dos itens flexíveis do mesmo contêiner. |
| flex-shrink | Especifica quanto o item encolherá em relação ao restante dos itens flexíveis do mesmo contêiner. |
| flex-basis | Especifica o comprimento do item como "auto", "inherit" ou um número seguido de "%", "px", "em", etc. |
| auto | Equivalente a 1 1 auto. |
| initial | Equivalente a 1 0 auto. |
| none | Equivalente a 0 0 auto. |
| inherit | Herda esta propriedade do seu elemento pai. |