說明
本文是作者Lefe所創(chuàng)捏境，轉(zhuǎn)載請注明出處笑陈，如果你在閱讀的時候發(fā)現(xiàn)問題歡迎一起討論帆锋。本文會不斷更新摄乒。
正文
開始學(xué)習(xí)微信小程序時，需要掌握最基本的UI布局评凝，有了UI的布局才是一個開始。下面主要通過一些例子來聊聊FlexBox布局梁沧，其實它和ReactNative大同小異垛孔。所以學(xué)習(xí)一門技術(shù)概作，其它的也就不愁了。下面主要通過一些例子來說明FlexBox是如何布局的霎槐。
FlexBox概述
1.png
- Flex container（容器）
承載子視圖的一個容器，也就是說一個視圖狼忱，如果設(shè)置成display: flex;饲帅，那么它就是作為一個Flex container。其中它的子視圖瘤泪，稱為FlexItem灶泵。
2.png
3.png
- 主軸（Main axis）:
主軸也就是水平軸，它決定了Flex item的布局的方向对途。也就是子視圖的布局方向是從水平方向開始赦邻。 - main-start | main-end
主軸的起點和結(jié)束點。 - main size
Flex container占主軸的空間实檀。 - 縱軸（cross axis）
垂直于主軸的軸成為縱軸深纲，也叫交叉軸。 - cross-start | cross-end
縱軸的起點和結(jié)束點劲妙。 - cross size
Flex container占縱軸的空間湃鹊。
一、容器屬性介紹
-
display：flex
如果想采用FlexBox布局镣奋，必須設(shè)置.container { display: flex; },這樣這個視圖將作為一個Flex container币呵。 -
flex-direction：row | row-reverse | column | column-reverse;
它決定了子視圖的布局方向，默認(rèn)的布局方向是row侨颈。
me.wxml文件
<view class="container">
<view class="children1"></view>
<view class="children2"></view>
<view class="children3"></view>
</view>
me.wxss文件
.container {
display: flex;
background-color: lightblue;
}
.children1 {
width: 100rpx;
height: 100rpx;
background-color: red;
}
.children2 {
width: 100rpx;
height: 100rpx;
background-color: yellow;
}
.children3 {
width: 100rpx;
height: 100rpx;
background-color: purple;
}
flex-direction:column余赢，垂直方向布局，從上到下布局
4.png
flex-direction: column-reverse;哈垢，垂直方向布局妻柒，從下到上布局
column.png
flex-direction: row;，默認(rèn)耘分，水平方向布局举塔，從左到右布局
.container {
display: flex;
flex-direction: row;
background-color: lightblue;
}
row.png
flex-direction: row-reverse;绑警，水平方向布局，從右到左布局
row-reverse.png
-
flex-wrap：nowrap | wrap | wrap-reverse央渣；
默認(rèn)情況下flex items是在一行進(jìn)行布局计盒，使用flex-wrap可以改變flex items進(jìn)行多行布局。默認(rèn)情況微信小程序是采用的nowrap,它試圖采用一行對flex items進(jìn)行布局芽丹。
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
background-color: lightblue;
}
norwrap.png
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
background-color: lightblue;
}
wrap.png
- flex-flow: 是flex-direction 和 flex-wrap屬性的簡寫北启，你可以這樣定義。
.container {
display: flex;
flex-flow: row wrap;
background-color: lightblue;
}
-
justify-content:flex-start | flex-end | center | space-between | space-around;
flex items 在主軸上的對其方式拔第。flex-start從主軸開始位置開始布局咕村；flex-end從主軸結(jié)束位置開始布局；center居中布局蚊俺；space-between第一個flex item在主軸的main-start培廓，最后一個flex item在主軸的main-end位置；space-around:開始于結(jié)束的flex item所占的空間是中間flexItem直接距離的一半春叫，中間flexItem之間的間距一樣。
.container {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
background-color: lightblue;
}
space-around.png
.container {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
background-color: lightblue;
}
space-between.png
-
align-items：flex-start | flex-end | center | baseline | stretch; flex item在縱軸方向的對其方式泣港。與主軸的布局大同小異暂殖。
flex-start:布局的起點為cross-start；flex-end:布局的起點為cross-end当纱；center:居中布局呛每；baseline:與基線對其；
stretch:默認(rèn)的屬性坡氯，但是它依據(jù)flex item 的min-height和max-height
.flex-container {
height: 400rpx;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: stretch;
background-color: lightblue;
}
.children1 {
width: 100rpx;
min-height: 100rpx;
background-color: red;
}
stretch.png
- align-content:flex-start | flex-end | center | space-between | space-around | stretch;晨横。多行時，縱軸的對齊方式箫柳，如果只有一行手形，它是沒有作用的。
.flex-container {
height: 400rpx;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: stretch;
flex-wrap: wrap;
align-content: flex-end;
background-color: lightblue;
}
.children1 {
width: 600rpx;
height: 100rpx;
background-color: red;
}
.children2 {
width: 600rpx;
height: 100rpx;
background-color: yellow;
}
.children3 {
width: 600rpx;
height: 100rpx;
background-color: purple;
}
align-content.png
二悯恍、Flex item屬性介紹
- order：控制Flex item的順序
.children1 {
width: 100rpx;
height: 100rpx;
order: 3;
background-color: red;
}
- flex-grow: 它必須是一個整數(shù)库糠，它表示如何分配剩余的空間，只越大他所分配的剩余空間就越大涮毫。
.children1 {
width: 20rpx;
flex-grow: 1;
height: 100rpx;
background-color: red;
}
.children2 {
width: 100rpx;
height: 100rpx;
background-color: yellow;
}
.children3 {
width: 100rpx;
flex-grow: 2;
height: 100rpx;
background-color: purple;
}
flex-grow.png
- flex-shrink: 它必須是一個整數(shù)瞬欧，它表示如何縮小Flex item，當(dāng)空間不足時罢防，是否要縮小艘虎。
.children1 {
width: 1000rpx;
flex-shrink: 2;
height: 100rpx;
background-color: red;
}
.children2 {
width: 100rpx;
height: 100rpx;
flex-shrink: 0;
background-color: yellow;
}
.children3 {
width: 1000rpx;
flex-shrink: 3;
height: 100rpx;
background-color: purple;
}
flex-shrink.png
- flex-basis:屬性定義了在分配多余空間之前，項目占據(jù)的主軸空間（main size）,他可以是固定的寬度咒吐，也可以是百分比野建。
.children1 {
height: 100rpx;
flex-basis: 50%;
background-color: red;
}
flex: 它是
flex-grow,flex-shrink和flex-basis的縮寫属划。默認(rèn)值為0 1 auto。align-self:auto | flex-start | flex-end | center | baseline | stretch;表示單獨一個Flex item的對其方式贬墩。
參考：
===== 我是有底線的 ======
喜歡我的文章榴嗅，歡迎關(guān)注我的新浪微博 Lefe_x，我會不定期的分享一些開發(fā)技巧
