这里的flex:1 有点不太懂

Question

我查的，flex:1解释是这个意思：

让所有弹性盒模型对象的子元素都有相同的长度，忽略它们内部的内容：

#main div
{
flex:1;
}

这里的1，指的是flex-shrink属性，flex-shrink 属性用于设置或检索弹性盒的收缩比率。

比如

让第二个元素收缩到其他元素的三分之一：

div:nth-of-type(2) {flex-shrink: 3;}

但是我在课程代码里，不管设置flex等于多少都不影响页面布局显示（只要flex的值大于1）。当然如果删除之后，就有影响了。

flex-shrink既然是规定项目将相对于其他灵活的项目进行收缩的量，那么这里的.left和.right都是300px，那么设置flex：1，不应该是中间的center也为300px吗？但实际上却是自适应的。而且只要设置大于1的数值都是自适应。

Answer 1

快乐动起来呀 2017-11-13 23:19:46

关于flex的详细教程看下：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

• 提问者 墨遥4328677 #1

  哈哈，其实阮一峰教程我看过了。我昨天理解的有问题。今天想了想，感觉想明白了。谢谢老师