Flex：1是什么意思？ [英] What does Flex:1 mean?

问题描述

我们都知道，
flex属性是flex-grow，flex-shrink和flex-basis属性的缩写。
其默认值是0 1 auto。这意味着：

  flex-grow：0; 
 flex-shrink：1; 
 flex-basis：auto; 
  

但是我注意到，在许多地方使用了flex：1。是1 1 auto还是1 0 auto的简写？
我无法理解这是什么意思？

解决方案

以下是解释：

https://www.w3.org/TR/css-flexbox-1/# flex-common

flex：< positive-number> 项目在flex
容器中获得指定的可用空间比例。如果flex容器中的所有项目都使用此模式，那么它们的
大小将与指定的弹性系数成比例。

flex：1 它相当于 flex：1 1 0

We all know, The flex property is a shorthand for the flex-grow, flex-shrink, and the flex-basis properties. And its default value is 0 1 auto. It means:

flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;

but I've noticed, in many place flex:1 is used. Is it shorthand for "1 1 auto" or "1 0 auto"? I can't understand what does it mean? I get nothing searching in googling.

解决方案

Here is the explanation:

https://www.w3.org/TR/css-flexbox-1/#flex-common

flex: <positive-number>
Equivalent to flex: <positive-number> 1 0. Makes the flex item flexible and sets the flex basis to zero, resulting in an item that receives the specified proportion of the free space in the flex container. If all items in the flex container use this pattern, their sizes will be proportional to the specified flex factor.

Therefore flex:1 it is equivalent to flex: 1 1 0

这篇关于Flex：1是什么意思？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！