弹弹弹,弹来盒模型

原创 悠游 随笔 前端之路 388阅读 2017-12-11 21:24:23 举报

真是感觉转眼之间,又是一周过去。周五学了个好玩的东东。
本来周五就该写笔记的,一时间懒虫出没,不小心就懒到了三天后......
弹性盒模型。听名字就觉得是个很Q弹的东西。
真到用的时候发现确实Q弹。
Q的差点Hold不住。
弹性盒模型 display:flex; 是一种特殊的盒模型。不同于之前学的盒模型填充和盒模型阴影,这是个很灵活的新东西。
其实这是个非常好用非常灵活的小东西。弄清楚他的要点,明白他的原理他会给你带来意想不到的效果。
大致要点主要有:
flex-direction 设置主轴方向
justify-content 主轴对齐(元素与富裕空间的关系)
align-items 侧轴对齐
换行之后每行之间的空隙处理
align-content 堆栈伸缩行
align-self 侧轴对齐
order 显示顺序
flex 伸缩性
最重要的一点来了:
弹性盒模型中的margin
在父级为弹性盒模型的情况下,子级元素支持四个方向的margin: auto(可上下左右同时居中)
终于啊终于,终于有一个margin可以不需要处理就可以居中的了。真心好用啊。
现在我们学习中用到的最好用的除了居中就是在列表排列中,之前因为列表中都会设置左右margin,最右侧的列表就会因为位置不够而排列到下一排,只得单独设置一个工具项nomargin去设置他,避免这个情况影响整体布局。
但是有了弹性盒模型,一切都不需要那么麻烦了。
鼓掌鼓掌!!
顺便放上一个小小练习,一个小小的半成品,只是为了练习弹性盒模型用的,所以细节莫究,能把要点掌握就好。
网站导航和列表都用了弹性盒模型,小图标用了雪碧图,按钮加了圆角效果,行业按钮用了盒模型阴影,给了一个内投影,效果看上去还不错呢。翻页按钮组自然是加了hover进去,小小的交互效果能让页面有一点点动态的感觉,在还没有学习JS的现在,这也是个小小的安慰呢。
列表项自然是弹弹弹的重点,全都用了弹性盒模型,真心好用啊。简单省事,一句口令,全部妥妥帖帖的。

弹弹弹,弹来盒模型
html 代码

评论 ( 1 )
最新评论
17317830002 2017-12-13 11:40:34 1F

弹,弹,弹 性 盒 模 型