flex的一个应用例子
ABC三个页面元素,怎样调换AC元素的位置使其变成CBA:
- 首先调换div顺序
<div class="flex">
<div>第一个元素</div>
<div>第二个元素</div>
<div>第三个元素</div>
</div>
/*flex调换元素测试*/
.flex > div:nth-child(1){
background:red;
order:2;
}
.flex > div:nth-child(2){
background:lightblue;
order:1;
}
.flex > div:nth-child(3){
background: green;
order:3;
}
.flex{
display:flex;
flex-direction: row;
color:white;
}
.flex >div{
flex:0 1 auto;
}
应用以上代码可以得到下面的效果:
可以看到 <div>第一个元素</div>
在<div>第二个元素</div>
前,使用了flex中的order属性之后可以很轻易的将其调换顺序。
2. flex水平居中测试
.flex{
display:flex;
flex-direction: row;
color:white;
justify-content:center;
background-color:aqua;
height:100px;
margin:0;
padding:0;
}
.flex >div{
flex:0 1 auto;
display:flex;
height:50px;
width:80px;
justify-content:center;
}
应用以上代码可以看到以下效果:
可以看出,使用flex的justify-content可以实现水平居中。
3. flex水平垂直居中测试
.flex{
display:flex;
flex-direction: row;
color:white;
justify-content:center;
align-items: center;
background-color:aqua;
height:100px;
margin:0;
padding:0;
}
.flex >div{
flex:0 1 auto;
display:flex;
height:50px;
width:80px;
justify-content:center;
align-items: center;
}
应用以上代码可以得到以下效果:
可以看出,使用flex的align-item可以实现水平居中。
控制水平居中的属性是 justify-content 而需要控制垂直居中的时候只需要将 align-items 设置为 center 即可。