码迷,mamicode.com
首页 > 其他好文 > 详细

flex

时间:2018-12-04 00:04:31      阅读:282      评论:0      收藏:0      [点我收藏+]

标签:round   dir   布局   art   class   lex   code   pre   isp   

老版本的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;//富裕空间在项目两边
justify-content:space-around;//富裕空间在项目之间

 

侧轴:align-items

align-items:flex-start;//富裕空间在侧轴的正方向
align-items:flex-end;//富裕空间在侧轴的反方向
align-items:center;//富裕空间在两边
align-items:baseline;//基线对齐
align-items:stretch;//等高

 

flex

标签:round   dir   布局   art   class   lex   code   pre   isp   

原文地址:https://www.cnblogs.com/xiej/p/10061767.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!