原創：新手佈局福音！微信小程序使用flex的一些基礎樣式屬性

來源：新手佈局福音！微信小程序使用flex的一些基礎樣式屬性

做者：Nazi

 

Flex佈局相對於之前咱們常常所用到的佈局方式要好的不少，在作微信小程序的時候要既能符合微信小程序的文檔開發要求，又能使用不一樣以往的居中方式並減小css的相關樣式聲明。

先來看看關於flex的一張圖：

 

 

從上面能夠看到一些flexbox的相關信息，

main axis 和 cross axis 指的是flexbox內部flex項目（flex item）的排列方向，通俗點說就是，裏面的flex項目是按照橫軸或者縱軸排列的順序方向。

main start 和 main end 是指項目的開始和項目的結束是按照排列方向的起點和終點。

再來看看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項目在軸方向上面排列的順序，

他有這樣幾個屬性：

flex-direction: row | row-reverse | column | column-reverse;

row

若是規定的方向是 ltr（left to right）項目一次從左往右排列，

若是規定的方向是 rtl（right to left）項目一次從右往左排列，

row是默認值。

row-reverse

若是規定的方向是 ltr（left to right）項目一次從右往左排列，

若是規定的方向是 rtl（right to left）項目一次從左往右排列，

row 和 row-reverse 是相反的。

column 跟row是相似的，只不過是從上到下的方向排列的。

column-reverse 跟row-reverse 是相似的，只不過是從下到上的方向排列的。

 

對於有時候，並不想讓全部的項目都在一行排列的話（多行顯示），咱們添加flex-wrap：

 

.container{
display: flex; /*or inline-flex*/
flex-direction: row;
flex-wrap：wrap；
}

 

flex-wrap是決定項目是否多行顯示的屬性，項目默認狀況下是在一行下顯示的。

flex-wrap: nowrap | wrap | wrap-reverse;

nowrap 指的是在一行顯示不換行；

wrap 指的是多行顯示；

wrap-reverse 指的是多行顯示，可是跟規定排列方向相反；

 

flex-flow是 flex-direction 和 flex-wrap 的縮寫

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

上面css即：

 

.container{
display: flex; /*or inline-flex*/
flex-flow：row wrap；
}

 

在咱們一些須要構建的佈局裏，咱們還須要去讓他可以自由的伸縮，這也是flex佈局的優點之一，可以極大的方便咱們去提高效率。

用於在主軸上對齊伸縮的項目屬性：justify-content。他的屬性有：

justify-content: flex-start | flex-end | center | space-between | space-around;

不一樣屬性值下他的表現：

css樣式爲：

 

.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

 

flex-end

 

center

 

space-between

 

space-around

 

 

flex-start(默認值),項目向起始位置靠齊，第一個項目所在軸的起點位置對齊，後面的項目與前一個項目的邊外邊對齊。

flex-end，項目向結束位置，最後一個項目所在軸的終點位置對齊，前面的項目與後一個項目的邊外邊對齊。

center，項目向一行的中間位置對齊，能夠說成是此行的居中對齊。在某些居中需求下的css樣式佈局既能夠選擇這個樣式聲明

space-between,項目會平均的分佈在一行裏面。項目的第一項和最後一項會與軸的起點和終點邊靠齊。其餘的項目則平均分佈早剩餘的空間裏面。

space-around，項目會平均分佈在一行裏。兩端會保留一半的空間。

 

在多行存在的狀況，有一個和justify-content相似的屬性，只不過他是做用在相對於軸的垂直方向上的。屬性值以下：

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

不一樣屬性值下的表現：(橫軸上規定的是 flex-start)

css樣式爲：

 

.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

 

flex-end

 

center

 

space-between

 
 

space-around

 

 

flex-start(默認值),項目向起始位置靠齊，第一個項目所在軸的起點位置對齊，後面的項目與前一個項目的邊外邊對齊。

flex-end，項目向結束位置，最後一個項目所在軸的終點位置對齊，前面的項目與後一個項目的邊外邊對齊。

center，項目向一行的中間位置對齊，能夠說成是此行的居中對齊。在某些居中需求下的css樣式佈局既能夠選擇這個樣式聲明

space-between,項目會平均的分佈在一行裏面。項目的第一項和最後一項會與軸的起點和終點邊靠齊。其餘的項目則平均分佈早剩餘的空間裏面。

space-around，項目會平均分佈在一行裏。兩端會保留一半的空間。

 

雖然方式跟justify-content是同樣的，可是由於軸的不一樣起始點和終點是不一樣的，因此顯示的方式是一直的，可是方向上的效果看起來會有點差別。

 

關於stretch 因爲上面的項目設定了高度，當項目的高度不是固定值得時候，stretch的表現以下：

 

 

也就是說側軸的長度是否是固定值得時候，各行會擴大佔據剩下的空間。

 

接下來 在介紹兩個屬性，align-items 和 align-self

align-items: flex-start | flex-end | center | baseline | stretch;

align-self: auto | flex-start | flex-end | center | baseline | stretch;

 

align-items是在全部項目上的對齊方式。

align-self是在單獨的項目上的對齊方式。

不一樣屬性值下的表現：(橫軸上規定的是 flex-start)

css樣式爲：

 

.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

 

align-self: 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

 

 

 

align-self: flex-end

 

align-items: center;

 

align-self: center;

 

align-items:baseline;

 

align-self:baseline;(爲了更好的能看出效果這裏限制全部的項目最小高度爲100px最大高度不定)

 

align-items: stretch; / align-self: stretch;

側軸的長度屬性爲auto 這個值會使外邊距盒子的尺寸按照min/max 的長度接近所在行的尺寸

 

另外：float clear vertical-align 在flex佈局裏裏面是無效的。

屬性介紹到這裏，就來先看看這個佈局的靈活性是如何體現的。

當只有一個flex項目的時候，結構如此下：

 

<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;
}

 

顯示是這樣的：

 

可是要讓他徹底居中的樣子，好比：

 

css樣式設定以下

 

.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;
}

 

如今讓他在右下角顯示以下：

 

CSS樣式設置：

 

.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樣式的聲明才能達到的效果。

跟新。。。寫糊塗了。再次感謝指出錯誤。

再來看看下面這個

 

html的結構以下：

 

<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>

 

css樣式以下：

 

.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;
}

 

僅僅只是添加下一條css樣式，而後增長項目個數，修改下外框的寬高度就有這樣的效果顯示。

 

一些基本的flex佈局的樣式就說到這裏了，這只是一個很小的點，其餘的更多的是體現出這佈局項目裏面的伸縮的計算方式 排列方式，如：order flex-grow flex-shrink flex-basis 等。更多的技巧則須要本身去深層次的探索。這裏僅僅只是基礎，大神們無視就好。

 

附加：簡單的說下flex-basis: 100%;  這個屬性定義了Flex項目在分配Flex容器剩餘空間以前的一個默認尺寸。