详解 flex:1 到底是什么

前言

flex布局在前端开发中是必不可少的,它打破了原来块级盒子自上向下排列的规则,使得开发者们可以更自由的排列盒子。flex:1相信大家在开发当中都没少写,但是它具体是什么意思相信很多人还不清楚,下面我们用通俗的话介绍下flex:1代表什么!!!


一、flex:1由哪些属性组合而成?

flex-grow : 1
flex-shrink : 1
flex-basis : auto


flex-grow:简单来说就是对父元素剩余空间的分配规则(默认值:0)

举例:父元素宽600px,子元素A宽100px,子元素B宽200px父元素的剩余空间为300px
详解 flex:1 到底是什么_第1张图片
子元素A设置 flex-grow:1
子元素B设置 flex-grow:2
如下图:
子元素A的宽度为 : (原先的宽) + (父元素剩余宽度) * (A元素占比 / A元素占比 + B元素占比)
100 + 300 * (1 / 1 + 2) = 200
子元素B的宽度为 : (原先的宽) + (父元素剩余宽度) * (B元素占比 / A元素占比 + B元素占比)
200 + 300 * (2 / 1 + 2) = 400
详解 flex:1 到底是什么_第2张图片


flex-shrink:仅当子元素相加宽度之和 大于 弹性盒子的时候发生的收缩比 (默认值:1)

举例:父元素宽600px,子元素A宽400px,子元素B宽600px超出父元素宽度400px
如下图:
子元素A的宽度为 : (原先的宽) - (超出父元素的宽度) * (A元素宽度 / A元素宽度 + B元素宽度)
400 - 400 * (400 / 400 + 600) = 240
子元素B的宽度为 : (原先的宽) - (超出父元素的宽度) * (B元素宽度 / A元素宽度 + B元素宽度)
600 - 400 * (400 / 400 + 600) = 360
详解 flex:1 到底是什么_第3张图片


flex-basis:简单来说就是盒子在主轴上的初始大小(默认值:auto)

举例:父元素宽600px
子元素A设置 flex-basis:100;width:200
子元素B设置width:400
如图:子元素A设置了flex-basis,宽度没有生效,子元素A的初始大小为100
详解 flex:1 到底是什么_第4张图片

你可能感兴趣的:(css,html,前端)