虽然接触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在伸缩项目上没有效果
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; /* 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>
用例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .wrap{ width: 500px; margin-right: auto; margin-left: auto; } .fx-box{ display: -webkit-box; display: -webkit-flex; display: flex; } .fx1{ -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; /*在旧版本的规范中,使用比例伸缩布局时,子元素的内容长短不同会导致无法等分*/ width: 0%; } .ico{ display: inline-block; width: 30px; height: 30px; background-color: red; } .fx-v-cen{/*垂直居中*/ -webkit-box-align: center; -webkit-align-items: center; align-items: center; } .fx-v-start{/*顶部*/ -webkit-box-align: start; -webkit-align-items: flex-start; align-items: flex-start; } .fx-v-end{/*底部*/ -webkit-box-align: end; -webkit-align-items: flex-end; align-items: flex-end; } .fx-vh-cen{ /*水平*/ -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; /*垂直*/ -webkit-box-align: center; -webkit-align-items: center; align-items: center; } .ul-sty{ text-align: center; list-style-type: none; background-color: red; } .ul-sty li:not(:last-of-type){ border-right: 1px solid #333; } .box-sty{ width: 200px; height: 200px; border: 1px solid #333; } .fx-box-vh{ /*指定主轴的伸缩方向是纵向的*/ -webkit-box-orient:vertical; -webkit-box-direction:normal; -webkit-flex-direction:column; flex-direction:column; } </style> </head> <body> <div class="wrap"> <div class="fx-box fx-v-cen"> <i class="ico"></i> <div class="fx1"> <p>aaaaaaaaaaaaaaa</p> <p>bbbbbbbbbbbbbbb</p> <p>ccccccccccccccc</p> <p>ddddddddddddddd</p> </div> </div> <div class="fx-box fx-v-cen"> <i class="ico"></i> <div class="fx1"> <p>aaaaaaaaaaaaaaa</p> <p>bbbbbbbbbbbbbbb</p> <p>ccccccccccccccc</p> <p>ddddddddddddddd</p> </div> <i class="ico"></i> </div> <ul class="ul-sty fx-box"> <li class="fx1">aaa</li> <li class="fx1">bbbbbb</li> <li class="fx1">ccc</li> <li class="fx1">ddd</li> </ul> <div class="box-sty fx-box fx-vh-cen"> <i class="ico">a</i> </div> <div class="fx-box fx-box-vh" style="height: 200px;"> <div>title</div> <div class="fx1" style="background-color: pink; 100%;"></div> <div>footer</div> </div> </div> </body> </html>