弹性盒模型2017.12.9

原创 20171025 随笔 HTML/CSS 3157阅读 2017-12-09 13:17:06 举报

昨天学的弹性盒模型,刚开始把自己搞得晕晕的,回家自己研究了一下,今天做了个小练习,感觉还是挺方便的。
display:flex;
弹性盒模型
flex-direction 设置主轴方向
row 从左向右排列(默认值)
row-reverse 从右向左排列
column 从上往下排列
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 会更改 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就占据其多少分之一

评论 ( 1 )
最新评论
17317830002 2017-12-13 11:23:49 1F

坚持的人总让人敬佩