2017-12-08休息一下,马上回来……

原创 moxiao 随笔 个人笔记 2184阅读 2017-12-08 21:24:19 举报

又是星期五,一转眼又要休息了,时间真的是快啊!

今天学了弹性盒模型,有点复杂的东西,但是不可否认,真的很好玩。
弹性盒模型
全新的一种布局方式
与传统布局思想完全不一样
CSS3新标准中反复修改后产出的内容
目前兼容性一般般
display:flex;
-webkit-display:box的进化版
让该容器具备弹性盒模型的特征

flex-direction 设置主轴方向
row 从左向右排列(默认值) 相当于x方向
row-reverse 从右向左排列
column 从上往下排列 相当于y方向
column-reverse 从下往上排列

justify-content 主轴对齐(元素与富裕空间的关系)
flex-start (默认) 元素在开始位置 富裕空间占据另一侧
flex-end 富裕空间在开始位置 元素占据另一侧
center 元素居中 富裕空间 平分左右两侧
space-between 富裕空间在元素之间平均分配
space-around 富裕空间在元素两侧平均分配

align-items 侧轴对齐
flex-start (默认) 元素在开始位置 富裕空间占据另一侧
flex-end 富裕空间在开始位置 元素占据另一侧
center 元素居中 富裕空间 平分左右两侧

flex-wrap 换行
nowrap (默认)
wrap 换行
wrap-reverse 反向换行

align-content 堆栈伸缩行 (说实话,这段话有点难,但是明白了align-content的作用后,反而觉得很简单)
align-content 会更改 flex-wrap 的行为。
它和 align-items 相似,但是不是对齐伸缩项目
它对齐的是伸缩行。

    flex-start (默认) 元素在开始位置 富裕空间占据另一侧
    flex-end 富裕空间在开始位置 元素占据另一侧
    center 元素居中 富裕空间 平分左右两侧
    space-between 富裕空间在元素之间平均分配
    space-around  富裕空间在元素两侧平均分配

flex-flow
flex-flow 是 flex-direction 和 flex-wrap 的缩写
flex-flow: [flex-direction] [flex-wrap]

align-self 侧轴对齐
flex-start (默认) 元素在开始位置 富裕空间占据另一侧
flex-end 富裕空间在开始位置 元素占据另一侧
center 元素居中 富裕空间 平分左右两侧

order 显示顺序
所有同级元素有order的情况下,才能进行比较
数字越小,显示越靠前
数值可以是负数
不能设置小数

flex 伸缩性
flex: auto
flex: none
可以写具体的数字
所有的数字相加的值,就是父级容器平均分配的等分
值为1就占据其多少分之一

最后就是一个很方便的东西了
在父级为弹性盒模型的情况下子级元素支持四个方向的margin: auto

最后的东西真的太好了,以前真的做一些东西真的有点麻烦,现在只需要给个弹性盒模型,OK了,是不是很赞!

好了,休息一下,消失一下,我还会回来的……

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复