这里的flex:1 有点不太懂

来源：3-2 页面布局（二）

墨遥4328677

2017-11-12

我查的，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的数值都是自适应。

写回答

1回答

快乐动起来呀

2017-11-13

已采纳

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

墨遥4328677

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

2017-11-13

共1条回复

前端跳槽面试必备技巧面试官全流程指导

一门让你能成功获取前端 Offer 的课程，不只是技术，面试“技巧”也至关重要

4836 学习 · 830 问题

相似问题

回答 2

回答 1

回答 1

回答 2

回答 1