热门关键字:
jquery > jquery教程 > jquery教程 > 作用于子项目的6大属性

作用于子项目的6大属性

339
作者:管理员
发布时间:2020/11/11 17:09:32
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=2904

① order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。

瑞讲堂|5个div让你学会弹性布局

② flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

瑞讲堂|5个div让你学会弹性布局

③ flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

瑞讲堂|5个div让你学会弹性布局

④ flex-basis定义项目占据的主轴空间。(如果主轴为水平,则设置这个属性,相当于设置项目的宽度。 原width将会失效。

瑞讲堂|5个div让你学会弹性布局

⑤ 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属性值。

瑞讲堂|5个div让你学会弹性布局

好了,相信到这里,所有同学都能够理解flex弹性布局了吧~~学习一个新知识,字不如表,表不如图。希望这5个div的图解,能够让所有同学深刻的理解Flex弹性布局~接下来,让我们愉快的抛弃Float、抛弃Position,一起拥抱Flex吧!!

最后,所有的源码附上,需要的同学自行测试哦~

瑞讲堂|5个div让你学会弹性布局

瑞讲堂|5个div让你学会弹性布局





如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jQuery
友荐云推荐