标签:
虽然接触Flex布局很久啦,但从来没在项目中使用过,一来原有布局方式也能满足需求,二来为了兼容性Flex各种版本的写法真是蛋疼...今天刚好闲的蛋疼
//居中
.vh-cen{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-moz-justify-content: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-moz-align-items: center;
-webkit-align-items: center;
align-items: center;
}
//Less中常用
.flex-box(){
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.flex(@v){
-webkit-box-flex:@v;
-moz-box-flex:@v;
-webkit-flex:@v;
-ms-flex:@v;
flex:@v;
}
//注意注意
CSS的columns在伸缩容器上没有效果。
float、clear和vertical-align在伸缩项目上没有效果
width: 0%;
display: block;旧版对伸缩项目要求
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } html,body{ height: 100%; } body{ display: flex; justify-content: center; align-items: center; } div[class^=box]{ width: 150px; height: 150px; background-color: #0ff; margin: 10px; float: left; } span{ display: block; width: 50px; height: 50px; background-color: #333; border-radius: 50%; } .box{ display: flex; justify-content: center;/*主轴方向对齐方式*/ align-items: center;/*交叉轴方向对齐方式*/ } .box2{ display: flex; flex-direction: column;/*决定主轴的方向*/ justify-content: space-between;/*主轴方向对齐方式*/ align-items: center;/*交叉轴方向对齐方式*/ } .box3{ display: flex; } .box3 .item:nth-child(2){ align-self: center;/*自己的对齐方式可覆盖align-items属性。默认值为auto*/ } .box4{ display: flex; justify-content: space-between;/*项目顶边,中间留空*/ } .box4 .item:nth-child(2){ align-self: flex-end; } .box5{ display: flex; /*width: 200px; justify-content: space-between;*/ } .box5 .item:nth-child(2){ align-self: center; } .box5 .item:nth-child(3){ align-self: flex-end; } .box6{ display: flex; flex-wrap: wrap;/*换行*/ justify-content: flex-end; align-content: space-between;/*定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。项目顶边,中间留空*/ } .box7{ display: flex; flex-wrap: wrap; align-content: space-between; } .box7 .column{ flex-basis: 100%; display: flex; justify-content: space-between; } .box8{ display: flex; flex-wrap: wrap; align-content: space-between; } .box9{ display: flex; flex-wrap: wrap; } .box9 .row{ flex-basis: 100%; display: flex; } .box9 .row:nth-child(2){ justify-content:center; } .box9 .row:nth-child(3){ justify-content:space-between; } .box10{ display: flex; flex-wrap: wrap; } </style> </head> <body> <div class="box"> <span class="item"></span> </div> <div class="box2"> <span class="item"></span> <span class="item"></span> </div> <div class="box3"> <span class="item"></span> <span class="item"></span> </div> <div class="box4"> <span class="item"></span> <span class="item"></span> </div> <div class="box5"> <span class="item"></span> <span class="item"></span> <span class="item"></span> </div> <div class="box6"> <span class="item"></span> <span class="item"></span> <span class="item"></span> <span class="item"></span> </div> <div class="box7"> <div class="column"> <span class="item"></span> <span class="item"></span> </div> <div class="column"> <span class="item"></span> <span class="item"></span> </div> </div> <div class="box8"> <span class="item"></span> <span class="item"></span> <span class="item"></span> <span class="item"></span> <span class="item"></span> <span class="item"></span> </div> <div class="box9"> <div class="row"> <span class="item"></span> <span class="item"></span> <span class="item"></span> </div> <div class="row"> <span class="item"></span> </div> <div class="row"> <span class="item"></span> <span class="item"></span> </div> </div> <div class="box10"> <span class="item"></span> <span class="item"></span> <span class="item"></span> <span class="item"></span> <span class="item"></span> <span class="item"></span> <span class="item"></span> <span class="item"></span> <span class="item"></span> </div> </body> </html>
标签:
原文地址:http://www.cnblogs.com/jiujiaoyangkang/p/5083532.html