彻底搞懂 flex: 1，flex: auto，flex: 0

文章预览

点击上方  程序员成长指北 ，关注公众号 回复 1 ，加入高级Node交流群 我们在日常使用flex布局的时候，经常会用到 flex 缩写。flex简写设置了项目如何增大或缩小以适应在容器中可用的空间。flex简写属性在下面有三个值的定义 默认值为 0 1 auto ; flex-grow :定义项目的放大比例，默认为 0 flex-shrink :定义项目的缩小比例,默认为 1 flex-basis :定义项目在分配多余的空间之前，项目占据的主轴空间 默认为 auto （item本来大小） 在了解了flex的基本值之后，我们会用一些用例来实验一下(没有特殊声明的话，用例代码都是以下的结构)    < div   class = "wrapper " >      < item   class = "inner" > 一一一一一一一一一一一一一一一一 item >      < item   class = "inner" > 二二 item >      < item   class = "inner" > 三三 item >      < item   class = "inner" > 四四四四四四四四四四四四四 ………………………………