Flex布局是一種強(qiáng)大而靈活的CSS布局方式，通過設(shè)置容器的display為flex，可以讓子元素按照一定的規(guī)則自動分配空間。常用的一些技巧包括：使用flex-direction設(shè)置主軸方向，使用flex-wrap換行排列，使用justify-content和align-items調(diào)整子元素沿主、交叉軸的對齊方式，使用flex-grow和flex-shrink控制子元素的伸縮性，使用order調(diào)整子元素的顯示順序，使用flex-basis設(shè)置子元素的初始尺寸等。
這種布局方式非常適用于響應(yīng)式設(shè)計(jì)，并且能夠簡化頁面布局的復(fù)雜性。
布局思路是這樣的：
1、首先給header和footer一個固定的高度。
2、然后記得body的高度要設(shè)為100%，不然body是沒有高度的。
3、body的布局設(shè)為flex，然后。
4、設(shè)置好了header和footer之后，我們就可以開始設(shè)計(jì)main部分的內(nèi)容排列，因?yàn)閎ody設(shè)置的排列是column，就是縱向排列，所以不能用align-items撐開main，只能在main里面設(shè)置flex: 1 1 auto將元素?fù)未螅襛side和article是有滾動條的：所以在main里面要設(shè)置隱藏浮動，不然會將屏幕撐到很大。
5、上面也可以看到main也是flex布局，所以aside和article成行排列，要使article撐滿寬度，也要設(shè)置flex: 1 1 auto。最后再完善每塊里面的細(xì)節(jié)布局。
Flex布局又稱彈性布局，在小程序開發(fā)中比較適用。因此將Flex布局相關(guān)屬性整理如下，搞清楚了這個布局，小程序開發(fā)的頁面布局就不在話下了。布局的傳統(tǒng)解決方案，基于盒狀模型，依賴 display屬性 + position屬性 + float屬性。它對于那些特殊布局非常不方便，比如，垂直居中就不容易實(shí)現(xiàn)。
div布局使用的是“盒模型”加上display、position和float屬性，但是對于一些特殊的布局實(shí)現(xiàn)例如居中卻是比較麻煩。
Flex 即為Flexible Box，指的是“彈性布局”，它可以為盒模型提供更加靈活的布局方式，例如，用flex可以優(yōu)雅地實(shí)現(xiàn)水平豎直居中的布局。
CSS3 彈性盒( Flexible Box 或 flexbox)，是一種當(dāng)頁面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞健?/p>
引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進(jìn)行排列、對齊和分配空白空間。
css3引入的flex布局優(yōu)缺點(diǎn)：優(yōu)點(diǎn)在于其容易上手，根據(jù)flex規(guī)則很容易達(dá)到某個布局效果。
缺點(diǎn)是：瀏覽器兼容性比較差，只能兼容到ie9及以上。
flex意為“彈性布局”，為盒模型提供最大靈活性。任何一個容器都可以指定為flex布局。
采用flex布局的元素，稱為flex容器。他的所有子元素自動成為容器成員，稱為flex項(xiàng)目，簡稱項(xiàng)目。
容器默認(rèn)存在兩根軸：水平的主軸和垂直的交叉軸。
主軸的開始位置（與邊框的交叉點(diǎn)）叫做main start，結(jié)束位置叫做main end；交叉軸的開始位置叫做cross start，結(jié)束位置叫做cross end。
項(xiàng)目默認(rèn)沿主軸排列。單個項(xiàng)目占據(jù)的主軸空間叫做main size，占據(jù)的交叉軸空間叫做cross size。
首先是上下布局，標(biāo)題欄 和主體 主體 分左右 導(dǎo)航 和內(nèi)容 左邊可用tabnavigator 右邊viewstack 或者static
CSS Flex布局中的自動換行是通過flex-wrap屬性實(shí)現(xiàn)的。當(dāng)flex-wrap屬性的值為wrap時，如果一行中的元素寬度之和超過了容器的寬度，那么多余的元素會自動換行到下一行。
具體實(shí)現(xiàn)原理如下：
1. 首先，F(xiàn)lex容器會根據(jù)flex-direction屬性的值（默認(rèn)為row）將子元素排列在一行上。
2. 當(dāng)一行中的元素寬度之和超過了容器的寬度時，如果flex-wrap屬性的值為nowrap（默認(rèn)值），則子元素會縮小以適應(yīng)容器寬度，否則會自動換行到下一行。
3. 換行后，F(xiàn)lex容器會根據(jù)flex-wrap屬性的值將子元素排列在新的一行上。
4. 如果新的一行中的元素寬度之和仍然超過了容器的寬度，那么會繼續(xù)自動換行，直到所有子元素都排列完畢。
需要注意的是，F(xiàn)lex容器中的子元素需要設(shè)置flex-basis屬性或width屬性，以便計(jì)算元素的寬度。同時，如果子元素的flex-grow屬性值不為0，那么它們會根據(jù)剩余空間自動擴(kuò)展，從而影響自動換行的效果。
在微信小程序開發(fā)中，布局是一個至關(guān)重要的部分。其中，flex布局是一種靈活且強(qiáng)大的布局方式，能夠幫助開發(fā)者更輕松地實(shí)現(xiàn)頁面布局。本文將深入探討微信小程序中的flex布局，帶您了解其優(yōu)勢、用法和實(shí)際應(yīng)用。
flex布局是一種基于盒模型的布局方式，通過靈活的彈性盒子布局模型，實(shí)現(xiàn)頁面元素的動態(tài)排列和對齊。在微信小程序中，可以通過使用flex布局輕松實(shí)現(xiàn)頁面的響應(yīng)式布局，適應(yīng)不同屏幕尺寸和設(shè)備。
相比傳統(tǒng)的布局方式，flex布局具有以下幾個優(yōu)勢：
要在微信小程序中使用flex布局，首先需要在WXML文件中定義布局結(jié)構(gòu)，并在WXSS文件中添加相應(yīng)的flex布局樣式。下面是一個簡單的示例：
<view class="container">
<view class="item item1">Item 1</view>
<view class="item item2">Item 2</view>
<view class="item item3">Item 3</view>
</view>
在WXSS文件中添加flex布局樣式：
.container {
display: flex;
justify-content: space-between;
}
.item {
flex: 1;
}
通過以上代碼示例，可以實(shí)現(xiàn)一個橫向布局的flex布局示例，其中三個子元素平均分配父容器的空間，并且在父容器中居中顯示。
flex布局在微信小程序開發(fā)中具有廣泛的應(yīng)用場景，特別適用于以下情況：
在微信小程序開發(fā)中，靈活運(yùn)用flex布局能夠提升頁面布局的靈活性和美觀度，使用戶體驗(yàn)更加友好和舒適。通過本文的介紹，相信您已經(jīng)對微信小程序中的flex布局有了更深入的了解，希望可以幫助您在實(shí)際開發(fā)中更好地運(yùn)用flex布局，打造出更好的用戶界面。
歡迎關(guān)注我們的博客，了解更多關(guān)于微信小程序開發(fā)的技術(shù)分享和最新動態(tài)！
flex-align：默認(rèn)是設(shè)置垂直方向的對齊方式，值： start、end、center、stretch、baseline。
flex-pack：設(shè)置子元素之間如何分配多余空間，值：start、end、center、justify。
flex-direction：設(shè)置子元素的排列方式， row、row-reverse、column、column-reverse。
flex-wrap：設(shè)置子元素的是否自動換行和排列方向，值：nowrap、wrap和wrap-reverse。
-ms-flex：設(shè)置子元素彈性，參數(shù)，分別是正彈性、負(fù)彈性和默認(rèn)大小。其實(shí)布局還有好多新玩法，你可以多看看相關(guān)的教程，比如說現(xiàn)在有個視頻的系列名稱叫做 《Buid New World》，里面有一集專門講 CSS3 復(fù)雜布局形式
