來源:新手佈局福音!微信小程序使用flex的一些基礎樣式屬性
作者:Nazi
Flex佈局相對於以前我們經常所用到的佈局方式要好的很多,在做微信小程序的時候要既能符合微信小程序的文檔開發要求,又能使用不同以往的居中方式並減少css的相關樣式聲明。
先來看看關於flex的一張圖:
<div class="container">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
...
</div>
<view class="container">
<view class="item1"></view>
<view class="item2"></view>
<view class="item3"></view>
...
</view>
當我們要用時這個佈局的時候對於外層的結構,我們對他的css樣式設定:
<style type="text/css">
.container{
display: flex; /*or inline-flex*/
}
</style>
接下來我們就需要來規定這個item排列的方向了,依舊對外層結構css設定:
.container{
display: flex; /*or inline-flex*/
flex-direction: row;
}
flex-direction這個屬性是用來規定flex項目在軸方向上面排列的順序,
.container{
display: flex; /*or inline-flex*/
flex-direction: row;
flex-wrap:wrap;
}
flex-wrap是決定項目是否多行顯示的屬性,項目默認情況下是在一行下顯示的。
.container{
display: flex; /*or inline-flex*/
flex-flow:row wrap;
}
在我們一些需要構建的佈局裏,我們還需要去讓他能夠自由的伸縮,這也是flex佈局的優勢之一,能夠極大的方便我們去提升效率。
.container{
width: 100%;
height: 400px;
background-color: #ccc;
display: flex; /*or inline-flex*/
flex-flow:row wrap;
justify-content:flex-start;
}
.item{
flex:0 0 30%;
}
.item1{background-color:#0074e0;}
.item{background-color:#008c00;}
.item3{background-color:#be0000;}
flex-start
.container{
width: 100%;
height: 400px;
background-color: #ccc;
display: flex;/*or inline-flex*/
flex-flow:row wrap;
justify-content:flex-start;
align-content: flex-start;
}
.item{
flex:0 0 30%;
min-height: 100px;
}
.item1,.item6{background-color:#0074e0;}
.item2{background-color:#008c00;}
.item5{background-color:#234567;}
.item3,.item4{background-color:#be0000;}
flex-start
.container{
width: 100%;
height: 400px;
background-color: #ccc;
display: flex;/*or inline-flex*/
flex-flow:row wrap;
justify-content:flex-start;
align-items: flex-start;
}
.item{
flex:0 0 30%;
min-height: 100px;
}
align-items: flex-start
.container{
width: 100%;
height: 400px;
background-color: #ccc;
display: flex;/*or inline-flex*/
flex-flow:row wrap;
justify-content:flex-start;
/*align-items: flex-start;*/
}
.item{
flex:0 0 30%;
min-height: 100px;
max-height: 300px;
}
.item:nth-child(2){
max-height: 200px;
align-self: flex-start;
}
align-items: flex-end
<div class="container">
<div class="item1"></div>
</div>
在微信小程序裏面可以是這樣的結構:
<view class="container">
<view class="item1"></view>
</view>
給他設定才css樣式,
.container{
width: 100%;
height: 400px;
background-color: #ccc;
display: flex;
flex-flow:row wrap;
justify-content:flex-start;
}
.item1{
background-color: #0074e0;
width: 50px;
height: 50px;
}
顯示是這樣的:
.container{
width: 100%;
height: 400px;
background-color: #ccc;
display: flex;
flex-flow:row wrap;
justify-content:center; /*樣式修改在這裏*/
align-items: center; /*樣式修改在這裏*/
}
.item1{
background-color: #0074e0;
width: 100px;
height:100px;
}
.container{
width: 100%;
height: 400px;
background-color: #ccc;
display: flex;
flex-flow:row wrap;
justify-content:flex-end; /*樣式修改在這裏*/
align-items:flex-end; /*樣式修改在這裏*/
}
.item1{
background-color: #0074e0;
width: 100px;
height:100px;
}
<div class="container">
<div class="item1"></div>
<div class="item2"></div>
</div>
在微信小程序裏面可以是這樣的結構:
<view class="container">
<view class="item1"></view>
<view class="item2"></view>
</view>
.container{
width: 100%;
height: 400px;
background-color: #ccc;
display: flex;
flex-flow:row wrap;
justify-content:flex-start;
align-items:flex-start;
}
.container{
width: 100%;
height: 400px;
background-color: #ccc;
display: flex;
flex-flow:row wrap;
justify-content:center;
align-items:flex-start;
}
.container{
width: 100%;
height: 400px;
background-color: #ccc;
display: flex;
flex-flow:row wrap;
justify-content:space-around;
align-items:flex-start;
}
從上面的列子看來,僅僅只是就該某些css的屬性,就能達到以前需要花大量css樣式的聲明才能達到的效果。
跟新。。。寫糊塗了。再次感謝指出錯誤。
<div class="container">
<div class="row">
<div class="item1"></div>
<div class="item2"></div>
<div class="item1"></div>
</div>
<div class="row">
<div class="item2"></div>
<div class="item1"></div>
<div class="item2"></div>
</div>
<div class="row">
<div class="item1"></div>
<div class="item2"></div>
<div class="item1"></div>
</div>
</div>
.container{
width: 400px;
height: 400px;
background-color: #ccc;
display: flex;
flex-wrap: wrap;
align-content: space-around;
}
.row{
display:flex;
flex-basis: 100%;
justify-content:space-around;
}
.item1,
.item2{
width: 100px;
height:100px;
}
.item1{
background-color: #0074e0;
}
.item2{
background-color: #008c00;
}