文章目录加载中

Flex缩放研究

经常会看到 flex: 1 1 的写法,其实它是缩写:

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

# flex-grow:放大比例

默认为 0,即有多余空间的时候,项目不放大。

如果所有项目均 flex-grow 为 1,那么会自动等分多余空间;如果有个 2,也按照比例等分。

# flex-shrink:缩小比例

默认为 1,如果空间不够,项目自动缩小。

如果一个项目为 0,其他为 1,那么空间不足,为 0 的项目不缩小。

# flex-basis:项目主轴空间

默认值是 auto。定义的是未缩放前,项目所占主轴空间。

可以指定百分比、 auto 、px

本文来自心谭博客:xin-tan.com,经常更新web和算法的文章笔记,前往github查看目录归纳:github.com/dongyuanxin/blog