首页 > 代码库 > flex布局浅谈和实例
flex布局浅谈和实例
阿基米德曾说给我一个支点我可以撬动地球,而拥有flex基本可以撬动所有的布局。
1.flex布局基本介绍及效果展示
工欲善其事必先利其器,来来来,一起看下基础知识先(呵~,老掉牙,但是有用啊)。
**flex-direction
direction(方向),布局方向,顾名思义就是设置元素排列顺序。排队嘛,不外乎横着排和竖着排,猜到了吧。(夸你)
想象一下哈,现在有一个班主任(父元素)要组织学生(子元素)跳第三套中小学生广播体操。
我们默认设置从低到高的方向。
好啦,排队啦。班主任说从低到高站一个横排:felx-direction:row
像这样:
站在队伍末尾的一米二班主任感觉鸭梨很大,so,他灵机一动:从高到低排felx-direction:row-reverse
被你猜到了,就是和刚开始的顺序相反嘛(机智如你)
班主任喜欢班级里个子最小的那个吕孩子,可是横排的话看不到她...
于是他就命令大家竖着从低到高排:flex-direction:column
呃,大概是这样了,但是第一排的妹子说太阳好晒想到后面去
班主任于是又让学生竖着从高到低排:flex-direction:column-reverse
排好了,开始跳操,齐步走。。。
**flex-wrap
好不容易跳完了,班主任眼尖的发现有一个男孩子穿了拖鞋,这怎可以,简直班级流动红旗不保的节奏
“把拖鞋自己拿去扔了”,这个拖鞋男孩纸只好出队。最近的垃圾桶在学校外面两公里(夸张手法,很远的意思)
拖鞋男走了,队伍就不整齐了,领导要来查看
对,就是补位(机智如我)。flex-wrap
。。。。未完待续
flex布局浅谈和实例
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。