O que significa flex: 1?
flex-grow
, flex-shrink
, e as propriedades flex-basis
.
E seu valor padrão é 0 1 auto
. Significa:
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
Mas tenho notado que em muitos lugares flex: 1
é usado. É estenografia para 1 1 auto
ou 1 0 auto
?
Não consigo entender o que significa? Não tenho nada à procura no Google.
4 answers
Aqui está a explicação:
Https://www.w3.org/TR/css-flexbox-1/#flex-common
Flex:
Equivalente a flex:10. Torna o item flex flexível e coloca a base flex a zero, resultando em um item que recebe a proporção especificada do espaço livre no flex recipiente. Se todos os itens no recipiente flex usar este padrão, o seu os tamanhos serão proporcionais ao flex especificado factor.
Portanto {[0] } é equivalente a flex: 1 1 0
flex: 1
significa o seguinte:
flex-grow : 1; // this means that the div will grow in same proportion as the window-size
flex-shrink : 1; // this means that the div will shrink in same proportion as the window-size
flex-basis : 0; // this means that the div does not have a starting value as such and will take up screen as per the screen size available for.e.g:- if 3 divs are in the wrapper then each div will take 33%.
TEM CUIDADO
Em alguns navegadores:
flex:1;
não igual flex:1 1 0;
flex:1;
= flex:1 1 0n;
(em que N é uma unidade de comprimento.
- Flex-grow: um número que especifica quanto o item irá crescer em relação ao resto dos itens flexíveis.
- Flex-encolher {[19] } um número que especifica quanto o item irá encolher em relação ao resto dos itens flexíveis
- base flex {[19] } o comprimento de item. Valores jurídicos: "auto", "herdar", ou um número seguido de"%", "px", " em " ou qualquer outra unidade de comprimento.
O ponto chave aqui é que a base flex requer uma unidadede comprimento .
Em cromado, por exemplo flex:1
e flex:1 1 0
produzem resultados diferentes. Na maioria das circunstâncias pode parecer que {[3] } está funcionando, mas vamos examinar o que realmente acontece:
A base Flex é ignorada e apenas a base flex-grow e flex-shrink são aplicado.
Exemplo
flex:1 1 0;
= flex:1 1;
= flex:1;
Isto pode, à primeira vista, parecer ok no entanto, se a unidade aplicada do contentor estiver aninhada; espere o inesperado!
Tente este exemplo no cromo
.Wrap{
padding:10px;
background: #333;
}
.Flex110x,.Flex1, .Flex110, .Wrap {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
}
.Flex110 {
-webkit-flex: 1 1 0;
flex: 1 1 0;
}
.Flex1 {
-webkit-flex: 1;
flex: 1;
}
.Flex110x{
-webkit-flex: 1 1 0%;
flex: 1 1 0%;
}
FLEX 1 1 0
<div class="Wrap">
<div class="Flex110">
<input type="submit" name="test1" value="TEST 1">
</div>
</div>
FLEX 1
<div class="Wrap">
<div class="Flex1">
<input type="submit" name="test2" value="TEST 2">
</div>
</div>
FLEX 1 1 0%
<div class="Wrap">
<div class="Flex110x">
<input type="submit" name="test3" value="TEST 3">
</div>
</div>
Compatibilidade
Note-se que esta falha porque estes navegadores não conseguiram aderir à especificação .
- Firefox - ✓
- Edge - ✓
- cromado-x
- Bravo x
- Opera-x
- IE - (lol, funciona sem unidade de comprimento, mas não com uma.)
A propriedade flex CSS especifica como um item flex irá crescer ou diminuir de modo a caber o espaço disponível no seu recipiente flex. Esta é uma propriedade abreviada que coloca flex-grow, flex-shrink, e flex-basis.
/* Basic values */
flex: auto;
flex: initial;
flex: none;
flex : 2;
/ * dois valores: flex-grow | flex-shrink * /
flex: 1 1;
/ * três valores: flex-grow | flex-shrink / flex-basis * /
flex: 1 1 10%;
Auto
O item é dimensionado de acordo com as suas propriedades de largura e altura, mas cresce para absorver qualquer item extra livre espaço no recipiente flex, e encolhe para o seu tamanho mínimo para caber o recipiente. Isto é equivalente à configuração "flex: 1 1 auto".
Inicial
Este é o valor por omissão. O item é dimensionado de acordo com suas propriedades de largura e altura. Ele encolhe para o seu tamanho mínimo para caber o recipiente, mas não cresce para absorver qualquer espaço livre extra no recipiente flex. Isto é equivalente à configuração "flex: 0 1 auto".
Nenhuma
O item está dimensionado de acordo com a sua largura e altura propriedades. É totalmente inflexível: não encolhe nem cresce em relação ao recipiente flex. Isto é equivalente à configuração "flex: 0 0 auto".