摘要：來(lái)源微信小程序使用的一些基礎(chǔ)樣式屬性作者接下來(lái)再介紹兩個(gè)屬性，和是在所有項(xiàng)目上的對(duì)齊方式。再次感謝指出錯(cuò)誤。再來(lái)看看下面這個(gè)的結(jié)構(gòu)如下樣式如下僅僅只是添加下一條樣式，然后增加項(xiàng)目個(gè)數(shù)，修改下外框的寬高度就有這樣的效果顯示。

來(lái)源：微信小程序使用flex的一些基礎(chǔ)樣式屬性
作者：Nazi

接下來(lái) 再介紹兩個(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)目上的對(duì)齊方式。

align-self是在多帶帶的項(xiàng)目上的對(duì)齊方式。

不同屬性值下的表現(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è)軸的長(zhǎng)度屬性為auto 這個(gè)值會(huì)使外邊距盒子的尺寸按照min/max 的長(zhǎng)度接近所在行的尺寸

另外：float clear vertical-align 在flex布局里里面是無(wú)效的。

屬性介紹到這里，就來(lái)先看看這個(gè)布局的靈活性是如何體現(xiàn)的。

當(dāng)只有一個(gè)flex項(xiàng)目的時(shí)候，結(jié)構(gòu)如此下：

在微信小程序里面可以是這樣的結(jié)構(gòu)：

給他設(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;
}

現(xiàn)在讓他在右下角顯示如下：

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)目：（后面新增不再贅述）

在微信小程序里面可以是這樣的結(jié)構(gòu)：

左上橫排

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

從上面的列子看來(lái)，僅僅只是就該某些css的屬性，就能達(dá)到以前需要花大量css樣式的聲明才能達(dá)到的效果。
跟新。。。寫(xiě)糊涂了。再次感謝指出錯(cuò)誤。再來(lái)看看下面這個(gè)

html的結(jié)構(gòu)如下：

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布局的樣式就說(shuō)到這里了，這只是一個(gè)很小的點(diǎn)，其他的更多的是體現(xiàn)出這布局項(xiàng)目里面的伸縮的計(jì)算方式 排列方式，如：order flex-grow flex-shrink flex-basis 等。更多的技巧則需要自己去深層次的探索。這里僅僅只是基礎(chǔ)，大神們無(wú)視就好。

附加：簡(jiǎn)單的說(shuō)下flex-basis: 100%; 這個(gè)屬性定義了Flex項(xiàng)目在分配Flex容器剩余空間之前的一個(gè)默認(rèn)尺寸。