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

图标文字三均分网格显示

时间:2016-09-30 21:27:53      阅读:222      评论:0      收藏:0      [点我收藏+]

标签:

图标文字三均分网格显示

今日做了几个类似九宫格分布的订单页面

使用了flex写的,貌似还可以。留存备忘录

如下图所示

 

技术分享

 

================

父元素设置了 

display: flex;

子元素设置了 

-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;

 

在水平,垂直居中即可

.flex-pack-center {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}

.flex-align-center {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}

 

下载地址:http://files.cnblogs.com/files/leshao/%E5%9B%BE%E6%A0%87%E6%96%87%E5%AD%97%E4%B8%89%E5%9D%87%E5%88%86%E7%BD%91%E6%A0%BC%E6%98%BE%E7%A4%BA.rar

 

图标文字三均分网格显示

标签:

原文地址:http://www.cnblogs.com/leshao/p/5924842.html

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