摘要：來源微信小程序使用的一些基礎樣式屬性作者布局相對于以前我們經常所用到的布局方式要好的很多，在做微信小程序的時候要既能符合微信小程序的文檔開發要求，又能使用不同以往的居中方式并減少的相關樣式聲明。

來源：微信小程序使用flex的一些基礎樣式屬性
作者：Nazi

Flex布局相對于以前我們經常所用到的布局方式要好的很多，在做微信小程序的時候要既能符合微信小程序的文檔開發要求，又能使用不同以往的居中方式并減少css的相關樣式聲明。
先來看看關于flex的一張圖：

從上面可以看到一些flexbox的相關信息，

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

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

再來看看flex的相關屬性：

我們給定一個結構：

...

在微信小程序里面可以是這樣的結構：

...

當我們要用時這個布局的時候對于外層的結構，我們對他的css樣式設定：

接下來我們就需要來規定這個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