赞
踩
1.实现弹性布局的前提:
父元素设置display:flex
2.主轴方向:
(1)flex-direction:row (默认) 主轴为水平方向,起点在左端
(2)flex-direction:row-reverse 主轴为水平方向,七点在右端
(3)flex-direction:column 主轴为垂直方向,起点在下边
(4)flex-direction:column-reverse 主轴为垂直方向,起点在下边
3.是否换行:
(1)flex-wrap:nowrap (默认) 不换行
(2)flex-wrap:wrap 换行,第一行在上方
(3)flex-wrap:wrap-reverse 换行,第一行在下方
4.主轴对齐方式:
(1)justify-content:flex-start (默认值) 轴起点对齐
(2)justify-content:flex-end 轴终点对齐
(3)justify-content:center 居中
(4)justify-content:space-between 两端对齐,项目之间间隔相等
(5)jusify-content:space-around 每个元素两侧的间隔相等
5.交叉轴对齐方式:
(1)align-items:flex-start 轴起点对齐
(2)align-items:flex-end 轴终点对齐
(3)align-items:center 居中
(4)align-items:baseline 项目中第一行文字的基线对齐
6.align-content:
调整换行对齐方式
7.flex和flex-graw:
分配剩余空间或者设置子元素的比例
赞
踩
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。