摘要：來源微信小程序使用的一些基礎樣式屬性作者接下來再介紹兩個屬性，和是在所有項目上的對齊方式。再次感謝指出錯誤。再來看看下面這個的結構如下樣式如下僅僅只是添加下一條樣式，然后增加項目個數，修改下外框的寬高度就有這樣的效果顯示。

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

接下來 再介紹兩個屬性，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項目的時候，結構如此下：

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

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

在加上一個項目：（后面新增不再贅述）

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

左上橫排

.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的結構如下：

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容器剩余空間之前的一個默認尺寸。