flex属性:
display:flex flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse; justify-content: flex-start | flex-end | center | space-between | space-around;
基本代码:
<template>
<div class="totalStyle">
<div class="firstStyle">
<div class="divStyle color1" >
</div>
<div class="divStyle color2" >
</div>
<div class="divStyle color3" >
</div>
</div>
</div>
</template>
<style scoped lang="scss">
.totalStyle{
height:100%;
width:100%;
}
.firstStyle{
width:100%;
height:300px;
background-color: #DDA0DD;
display: flex;
flex-direction:row;
flex-wrap: nowrap;
justify-content: flex-start;
}
.color1{
background-color: #AFEEEE;
}
.color2{
background-color: #0000FF;
}
.color3{
background-color: #BA55D3;
}
.divStyle1{
width:200px;
height: 200px;
}
.divStyle2{
width:200px;
height: 100px;
}
.divStyle3{
width:200px;
height: 50px;
}
</style>
项目排列顺序:
1 flex:row;
父级模块中,子级项目按从左到右顺序排列;
2 flex:row-reverse;
父级模块中,子级项目按从右到左顺序排列;
3 flex:column;
父级模块中,子级项目按从上到下顺序排列;
4 flex:column-reverse;
父级模块中,子级项目按从下到上顺序排列;
项目排列方式:
1justify-content: center;
父级模块中,所有子级项目水平居中排列;
2 justify-content: flex-start;
父级模块中,所有子级项目左对齐;
2 justify-content: flex-end;
父级模块中,所有子级项目右对齐;
3 justify-content: space-between;
父级模块中,所有子级项目顺序排列,间隔相等;
4 justify-content: space-around;
父级模块中,所有子级项目两侧间隔相等;
项目排列是否huan'hang
1flex-wrap: nowrap;
不换行,会缩小项目宽度,来占据页面;
2flex-wrap: wrap;
换行显示,超过父级模块的也会显示
2flex-wrap: wrap-reverse;
换行显示,第一行在最下面