不再混淆,一次搞懂!图解flexbox十余个属性原文首发于个人博客:不再混淆,一次搞懂!图解flexbox十余个属性 一、flexbox是什么?从字面上来看,flexbox是可伸缩的盒子的意思。我们可以让这个盒子里的子项,根据我们的需要拉伸、对齐、排序。设置父元素为flexbox,即可激活这个弹性机制。方法如下: 首先我们来设置html
接下来设置css
或者
二、属性太多很难记?和flexbox相关的属性繁多,每个属性又有不同的值,要一时半会全部记住是不太可能,但是我们可以分类记忆,在脑中有印象后在使用时勤查文档,相信要熟练应用还是会很快的。记忆flexbox只需要记住两点:
父容器属性
子项属性
三、图解父容器的属性我们逐一来看看效果,先来看看父元素的属性(不要忘了我们已经在父元素上加上了display:flex哦,下面为了更直观对比隐藏了这个设置) 3.1 flex-direction属性定义子项在容器内的排列方向
3.2 flex-wrap属性定义子项在容器内的换行效果
3.3 flex-flow属性flex-flow是flex-direction和flex-wrap两个属性的简写,参考以上两个属性的写法即可,在此略过。 3.4 justify-content属性定义子项在容器内水平对齐方式
3.5 align-items属性定义 子项在容器内垂直对齐方式
3.6 align-content属性定义多行子项在容器内整体垂直对齐方式
四、图解子项的属性4.1 order属性定义子项们的排列顺序
flex-grow属性定义子项宽度之和不足父元素宽度时,子项拉伸的比例
4.2 flex-shrink属性定义子项宽度之和超过父元素宽度时,子项缩放的比例
说明: flex-shrink的默认值为1,浏览器将超出的空间,按照收缩因子相加之后计算比率来进行空间收缩。 我们给父容器width定义为800px,子项的width被定义为250px,5个子项相加之后即为1250px,超出父容器450px。那么这么超出的450px需要被这5个子项消化。 按照收缩因子,加权综合可得250*1+250*1+250*1+250*2+250*1=1500px; 收缩因子为1的,被移除溢出量:(250*1/1500)*450,即等于75px 收缩因子为2的,被移除溢出量:(250*2/1500)*450,即约等于150px 最后实际宽度分别为:250-75=175px, 250-150=100px 4.3 flex-basis属性定义子项的初始宽度,若子项宽度之和超过父元素宽度时,子项按照flex-basis的比例缩放
flex-basis的默认值为auto( 图例中5定义了flex-basis:400px,其余子项定义了flex-basis:200px,我们给父容器width定义为800px,5个子项相加之后即为1200px,超出父容器400px。那么这么超出的400px需要被这5个子项消化。 这5个子项的比例为1:1:1:1:2,则多出来的400px要被分为6份,于是我们可以计算子项将被移除的溢出量是多少: flex-basis为400px的,被移除溢出量:400/6*2,即约等于133.33px flex-basis为200px的,被移除溢出量:400/6*1,即约等于66.67px 最后实际宽度分别为:400-133.33=266.67px, 200-66.67=133.33px flex-basis:[percentage]与[length]的计算方式类似 4.4 flex属性flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。 4.5 align-self属性定义单个子项与其他项目不一样的对齐方式 align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖父容器的align-items属性。默认值为auto,表示继承父容器的align-items属性,如果没有父容器,则等同于stretch。 图例中父容器设置了align-items:flex-start,然后我们单独给5设置了align-self:flex-end。 参考: http://www./blog/2015/07/flex-grammar.html |
|