css3 box-flex属性

外层元素的display设置为box 

子元素以box-flex: 1

进行等比例划分内容垂中居中 padding:20px 0 通过padding来实现；

也可以 对外层元素

-webkit-box-pack:center;
-webkit-box-align:center;

 

 1         .ul,li{
 2             display: -webkit-box;
 3             -webkit-box-pack:center;
 4             -webkit-box-align:center;
 5             border:1px solid red;
 6             height: 80px;
 7         }
 8 
 9         .li1{
10             -webkit-box-flex: 1;
11         }
12         .li2{
13             -webkit-box-flex: 2;
14         }
15         .li3{
16             -webkit-box-flex: 3;
17         }

 

1 <ul class="ul">
2     <li class="li1">value1</li>
3     <li class="li2">value2</li>
4     <li class="li3">value3</li>
5 </ul>

 

posted on 2016-11-11 16:31  Mc525  阅读(131)  评论(0)    收藏  举报

导航