文章内容
2021/3/20 17:17:47,作 者: 黄兵
flex: 1 0 auto; 理解
最近看到在使用Flex布局的时候，有如下写法：
.flex-no-shrink {
-webkit-box-flex: 1;
-webkit-flex: 1 0 auto;
flex: 1 0 auto;
box-sizing: border-box;
}
这里flex是简写，是flex-grow, flex-shrink和flex-basis合并。第二和第三参数（flex-shrink和flex-basis）是可选的。默认值为0 1 auto，但是如果您将其设置为一个数字值，则类似于 1 0。
flex-grow：这定义了弹性项目在必要时增长的能力。它接受作为比例的无单位值。它决定了项目应在flex容器内占用的可用空间量。
如果所有项目都flex-grow设置为1，则容器中的剩余空间将平均分配给所有子项。如果其中一个孩子的值为2，则剩余空间将占其他孩子的两倍（或者至少会尝试）。
如下图所示：
flex-shrink：定义了弹性项目在必要时收缩的能力。
flex-basis：这定义了剩余空间分配之前元素的默认大小。它可以是长度（例如20％，5rem等）或关键字。该auto关键字的意思是“看我的宽度或高度财产”（这是暂时被做main-size关键字，直到不建议使用）。该content关键字的意思是“它根据项目的内容大小” -此关键字不能很好地支持还，所以很难测试。
参考资料：
评论列表