首页 > 代码库 > 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布局浅谈和实例