flex
发布时间:2020-12-15 01:50:22 所属栏目:百科 来源:网络整理
导读:老版本的flex 需将display设置为box。 容器的布局方向 -webkit-box-orient控制主轴是哪一根。 -webkit-box-orient:horizontal;//主轴为水平方向-webkit-box-orient:vertical;//主轴为水平方向 容器的排列方向 -webkit-box-dirextion控制主轴方向。 -webkit-b
老版本的flex需将display设置为box。 容器的布局方向-webkit-box-orient控制主轴是哪一根。 -webkit-box-orient:horizontal;//主轴为水平方向
-webkit-box-orient:vertical;//主轴为水平方向
容器的排列方向-webkit-box-dirextion控制主轴方向。 -webkit-box-direction:narmal;//从左往右(从上往下)
-webkit-box-direction:reverse//从右往左(从下往上)
富裕空间的管理主轴:-webkit-box-pack。 主轴为水平方向时: -webkit-box-pack:start;//在右边
-webkit-box-pack:end;//在左边
-webkit-box-pack:center;//在两边
-webkit-box-pack:justify;//在项目之间
? 主轴为垂直方向时: -webkit-box-pack:start;//在下面
-webkit-box-pack:end;//在上面
-webkit-box-pack:center;//在两边
-webkit-box-pack:justify;//在项目之间
?侧轴:-webkit-box-align。 侧轴为水平方向时: -webkit-box-align:start;//在右边
-webkit-box-align:end;//在左边
-webkit-box-align:center;//在两边
?侧轴为垂直方向时: -webkit-box-align:start;//在下面
-webkit-box-align:end;//在上面
-webkit-box-align:center;//在两边
新版本的flex容器的布局方向,容器的排列方向flex-direction控制主轴是哪一根,控制主轴方向 flex-direction:row;//从左往右 flex-direction:row-reverse;//从右往左 flex-direction:column;//从上往下 flex-direction:column-reverse;//从下往上 富裕空间的管理主轴:justify-content justify-content:flex-start;//富裕空间在主轴正方向
justify-content:flex-end;//富裕空间在主轴反方向
justify-content:center;//富裕空间在两边
justify-content:space-between;//富裕空间在项目两边
? 侧轴:align-items align-items:flex-start;//富裕空间在侧轴的正方向
align-items:flex-end;//富裕空间在侧轴的反方向
align-items:center;//富裕空间在两边
align-items:baseline;//基线对齐
align-items:stretch;//等高
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |