來源：新手布局福音舌镶！微信小程序使用flex的一些基礎(chǔ)樣式屬性
作者：Nazi
Flex布局相對于以前我們經(jīng)常所用到的布局方式要好的很多，在做微信小程序的時(shí)候要既能符合微信小程序的文檔開發(fā)要求蠕蚜，又能使用不同以往的居中方式并減少css的相關(guān)樣式聲明尚洽。
先來看看關(guān)于flex的一張圖：
從上面可以看到一些flexbox的相關(guān)信息悔橄，
main axis 和 cross axis 指的是flexbox內(nèi)部flex項(xiàng)目（flex item）的排列方向靶累，通俗點(diǎn)說就是腺毫，里面的flex項(xiàng)目是按照橫軸或者縱軸排列的順序方向。
main start 和 main end 是指項(xiàng)目的開始和項(xiàng)目的結(jié)束是按照排列方向的起點(diǎn)和終點(diǎn)挣柬。
再來看看flex的相關(guān)屬性：
我們給定一個(gè)結(jié)構(gòu)：
<div class="container">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
...
</div>
在微信小程序里面可以是這樣的結(jié)構(gòu)：
<view class="container">
<view class="item1"></view>
<view class="item2"></view>
<view class="item3"></view>
...
</view>
當(dāng)我們要用時(shí)這個(gè)布局的時(shí)候?qū)τ谕鈱拥慕Y(jié)構(gòu)潮酒，我們對他的css樣式設(shè)定：
<style type="text/css">
.container{
display: flex; /*or inline-flex*/
}
</style>
接下來我們就需要來規(guī)定這個(gè)item排列的方向了，依舊對外層結(jié)構(gòu)css設(shè)定：
.container{
display: flex; /*or inline-flex*/
flex-direction: row;
}
flex-direction這個(gè)屬性是用來規(guī)定flex項(xiàng)目在軸方向上面排列的順序邪蛔，
他有這樣幾個(gè)屬性：
flex-direction: row | row-reverse | column | column-reverse;
row
如果規(guī)定的方向是 ltr（left to right）項(xiàng)目一次從左往右排列急黎，
如果規(guī)定的方向是 rtl（right to left）項(xiàng)目一次從右往左排列，
row是默認(rèn)值侧到。
row-reverse
如果規(guī)定的方向是 ltr（left to right）項(xiàng)目一次從右往左排列勃教，
如果規(guī)定的方向是 rtl（right to left）項(xiàng)目一次從左往右排列，
row 和 row-reverse 是相反的匠抗。
column 跟row是類似的故源，只不過是從上到下的方向排列的。
column-reverse 跟row-reverse 是類似的汞贸，只不過是從下到上的方向排列的绳军。
對于有時(shí)候，并不想讓所有的項(xiàng)目都在一行排列的話（多行顯示）矢腻，我們添加flex-wrap：
.container{
display: flex; /*or inline-flex*/
flex-direction: row;
flex-wrap：wrap门驾；
}
flex-wrap是決定項(xiàng)目是否多行顯示的屬性，項(xiàng)目默認(rèn)情況下是在一行下顯示的多柑。
flex-wrap: nowrap | wrap | wrap-reverse;
nowrap 指的是在一行顯示不換行奶是；
wrap 指的是多行顯示；
wrap-reverse 指的是多行顯示竣灌，但是跟規(guī)定排列方向相反诫隅；
flex-flow是 flex-direction 和 flex-wrap 的縮寫
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
上面css即：
.container{
display: flex; /*or inline-flex*/
flex-flow：row wrap；
}
在我們一些需要構(gòu)建的布局里帐偎，我們還需要去讓他能夠自由的伸縮逐纬，這也是flex布局的優(yōu)勢之一，能夠極大的方便我們?nèi)ヌ嵘省?/p>
用于在主軸上對齊伸縮的項(xiàng)目屬性：justify-content削樊。他的屬性有：
justify-content: flex-start | flex-end | center | space-between | space-around;
不同屬性值下他的表現(xiàn)：
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(默認(rèn)值),項(xiàng)目向起始位置靠齊豁生，第一個(gè)項(xiàng)目所在軸的起點(diǎn)位置對齊，后面的項(xiàng)目與前一個(gè)項(xiàng)目的邊外邊對齊漫贞。
flex-end甸箱，項(xiàng)目向結(jié)束位置，最后一個(gè)項(xiàng)目所在軸的終點(diǎn)位置對齊迅脐，前面的項(xiàng)目與后一個(gè)項(xiàng)目的邊外邊對齊芍殖。
center，項(xiàng)目向一行的中間位置對齊谴蔑，可以說成是此行的居中對齊豌骏。在某些居中需求下的css樣式布局既可以選擇這個(gè)樣式聲明
space-between,項(xiàng)目會(huì)平均的分布在一行里面龟梦。項(xiàng)目的第一項(xiàng)和最后一項(xiàng)會(huì)與軸的起點(diǎn)和終點(diǎn)邊靠齊。其他的項(xiàng)目則平均分布早剩余的空間里面窃躲。
space-around计贰，項(xiàng)目會(huì)平均分布在一行里。兩端會(huì)保留一半的空間蒂窒。
在多行存在的情況躁倒，有一個(gè)和justify-content類似的屬性，只不過他是作用在相對于軸的垂直方向上的洒琢。屬性值如下：
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
不同屬性值下的表現(xiàn)：(橫軸上規(guī)定的是 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(默認(rèn)值),項(xiàng)目向起始位置靠齊秧秉，第一個(gè)項(xiàng)目所在軸的起點(diǎn)位置對齊，后面的項(xiàng)目與前一個(gè)項(xiàng)目的邊外邊對齊衰抑。
flex-end福贞，項(xiàng)目向結(jié)束位置，最后一個(gè)項(xiàng)目所在軸的終點(diǎn)位置對齊停士，前面的項(xiàng)目與后一個(gè)項(xiàng)目的邊外邊對齊挖帘。
center，項(xiàng)目向一行的中間位置對齊恋技，可以說成是此行的居中對齊拇舀。在某些居中需求下的css樣式布局既可以選擇這個(gè)樣式聲明
space-between,項(xiàng)目會(huì)平均的分布在一行里面。項(xiàng)目的第一項(xiàng)和最后一項(xiàng)會(huì)與軸的起點(diǎn)和終點(diǎn)邊靠齊蜻底。其他的項(xiàng)目則平均分布早剩余的空間里面骄崩。
space-around，項(xiàng)目會(huì)平均分布在一行里薄辅。兩端會(huì)保留一半的空間要拂。
雖然方式跟justify-content是一樣的，但是因?yàn)檩S的不同起始點(diǎn)和終點(diǎn)是不同的站楚，所以顯示的方式是一直的脱惰，但是方向上的效果看起來會(huì)有點(diǎn)差異。
關(guān)于stretch 由于上面的項(xiàng)目設(shè)定了高度窿春，當(dāng)項(xiàng)目的高度不是固定值得時(shí)候拉一，stretch的表現(xiàn)如下：
也就是說側(cè)軸的長度是不是固定值得時(shí)候，各行會(huì)擴(kuò)大占據(jù)剩下的空間旧乞。
接下來 在介紹兩個(gè)屬性蔚润，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是在所有項(xiàng)目上的對齊方式。
align-self是在單獨(dú)的項(xiàng)目上的對齊方式尺栖。
不同屬性值下的表現(xiàn)：(橫軸上規(guī)定的是 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;(為了更好的能看出效果這里限制所有的項(xiàng)目最小高度為100px最大高度不定)
align-items: stretch; / align-self: stretch;
側(cè)軸的長度屬性為auto 這個(gè)值會(huì)使外邊距盒子的尺寸按照min/max 的長度接近所在行的尺寸
另外：float clear vertical-align 在flex布局里里面是無效的嫡纠。
屬性介紹到這里，就來先看看這個(gè)布局的靈活性是如何體現(xiàn)的。
在微信小程序里面可以是這樣的結(jié)構(gòu)：
<view class="container">
<view class="item1"></view>
</view>
給他設(shè)定才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樣式設(shè)定如下
.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樣式設(shè)置：
.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;
}
在加上一個(gè)項(xiàng)目：（后面新增不再贅述）
<div class="container">
<div class="item1"></div>
<div class="item2"></div>
</div>
在微信小程序里面可以是這樣的結(jié)構(gòu)：
<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;
}
兩個(gè)項(xiàng)目不貼在一起
.container{
width: 100%;
height: 400px;
background-color: #ccc;
display: flex;
flex-flow:row wrap;
justify-content:space-around;
align-items:flex-start;
}
從上面的列子看來，僅僅只是就該某些css的屬性痴颊，就能達(dá)到以前需要花大量css樣式的聲明才能達(dá)到的效果。
跟新屡贺。蠢棱。。寫糊涂了甩栈。再次感謝指出錯(cuò)誤泻仙。再來看看下面這個(gè)
html的結(jié)構(gòu)如下：
<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樣式，然后增加項(xiàng)目個(gè)數(shù)量没，修改下外框的寬高度就有這樣的效果顯示玉转。
一些基本的flex布局的樣式就說到這里了，這只是一個(gè)很小的點(diǎn)殴蹄，其他的更多的是體現(xiàn)出這布局項(xiàng)目里面的伸縮的計(jì)算方式 排列方式究抓，如：order flex-grow flex-shrink flex-basis 等。更多的技巧則需要自己去深層次的探索袭灯。這里僅僅只是基礎(chǔ)刺下，大神們無視就好。
附加：簡單的說下flex-basis: 100%; 這個(gè)屬性定義了Flex項(xiàng)目在分配Flex容器剩余空間之前的一個(gè)默認(rèn)尺寸稽荧。
