① order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
② flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
③ flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
④ flex-basis定义项目占据的主轴空间。(如果主轴为水平,则设置这个属性,相当于设置项目的宽度。 原width将会失效。
⑤ flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
此属性有两个快捷设置:auto=(1 1 auto)/none=(0 0 auto)
⑥ align-self:定义单个项目自身在交叉轴上的排列方式,可以覆盖掉容器上的align-items属性。
属性值:与align-items相同,默认值为auto,表示继承父容器的align-items属性值。
好了,相信到这里,所有同学都能够理解flex弹性布局了吧~~学习一个新知识,字不如表,表不如图。希望这5个div的图解,能够让所有同学深刻的理解Flex弹性布局~接下来,让我们愉快的抛弃Float、抛弃Position,一起拥抱Flex吧!!
最后,所有的源码附上,需要的同学自行测试哦~
如果您觉得本文的内容对您的学习有所帮助:
关键字:
jquery