Propriedade flex
A propriedade flex é uma abreviação para flex-basis,
flex-shrink
e flex-grow.
Aplica-se a: um item flex específico.
A ordem dos valores não importa. O segundo e terceiro
parâmetros (flex-shrink, flex-basis)
são opcionais.
Valores
Consulte as propriedades correspondentes.
Valor padrão: 0 1 auto.
Exemplo
Suponha que temos 3 elementos. A largura de cada um deles
é 200px e somam 600px no total,
o que é maior que a largura do contêiner pai, que
é 300px. Vamos definir para o primeiro elemento uma largura de
200px, para o segundo elemento - 300px, para
o terceiro elemento - 100px. Para todos os elementos,
deixe o valor flex-basis igual a 1,
e flex-shrink - 1, 2, 3 de acordo
com o número ordinal do elemento:
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem2">3</div>
</div>
.parent {
display: flex;
width: 350px;
height: 200px;
border: 1px solid red;
}
.child {
width: 200px;
height: 50px;
border: 1px solid green;
}
.elem1 {
flex: 200px 1 1;
}
.elem2 {
flex: 300px 1 2;
}
.elem3 {
flex: 100px 1 3;
}
:
Veja também
-
propriedade
flex-direction,
que define a direção dos eixos dos itens flex -
propriedade
justify-content,
que define o alinhamento ao longo do eixo principal -
propriedade
align-items,
que define o alinhamento ao longo do eixo transversal -
propriedade
flex-wrap,
que define a quebra de linha dos itens flex -
propriedade
flex-flow,
abreviação para flex-direction e flex-wrap -
propriedade
order,
que define a ordem dos itens flex -
propriedade
align-self,
que define o alinhamento de um item específico -
propriedade
flex-basis,
que define o tamanho de um item flex específico -
propriedade
flex-grow,
que define a capacidade de crescimento dos itens flex -
propriedade
flex-shrink,
que define a capacidade de redução dos itens flex
