flex布局中的flex：0 1 auto的含义

90 阅读 0 评论 60 点赞

我是靠谱客的博主典雅向日葵，最近开发中收集的这篇文章主要介绍flex布局中的flex：0 1 auto的含义，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

flex:0 1 auto指的是flex-grow,flex-shrink,flex-basis3个属性结合在一起的缩写形式。

flex-grow：定义了项目的放大比例，默认为0，即使存在剩余空间，也不放大。

flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

flex-basis：定义在分配多余空间之前，项目占据的主轴空间。

盒子的宽度先看flex-basis给定的值，比如flex:1 1 0%,即便给定的盒子width为100px，也会因为0%，而在盒子中的值实际占据宽度为0。flex：1 1 auto的话，盒子的宽度就会和高度一致。然后看盒子是否有剩余空间，再重新分配空间，如果有多余的空间，就看flex-grow的值，把容器里面的盒子的所有的flex-grow加在一起，用盒子剩余大小除以flex-grow的总数，就是1份的大小，看每个盒子的flex-grow的值，乘上每一份的值，加上在flex-basis属性重新变更的宽度，就是盒子的实际宽度，缩小反之。