在我們常用的布局中有display + position + float進(jìn)行布局昂羡，但是這些布局或多或少都有些麻煩（雖然我最喜歡用position,哈哈啥都能干)堆巧。但是由于快應(yīng)用只能夠使用flex布局庐船，flex布局和position有沖突汤求，所以在快應(yīng)用中能夠使用的position只有fixed议慰，而float布局總是會出現(xiàn)各種各樣的問題速址，flex的優(yōu)勢就顯而易見龄糊，簡單好用逆粹。
快應(yīng)用使用的是Flex布局，每個盒子都是用有一個自帶屬性就是display: flex
所以在寫css代碼的過程中炫惩，不需要我們聲明這是一個flex盒子僻弹，這是一個flex盒子的示意圖。下面介紹有關(guān)flex的一些常用基本屬性：flex-direction;flex-wrap;justify-content;align-content;align-items;
flex-direction是定義主軸的方向他嚷，常用的有column蹋绽，row。
在上面示意圖中可以看到main-axis就是水平的筋蓖，flex-direction的默認(rèn)設(shè)置是row卸耘，也就是我們看到的情景，如果flex-direciton只需要把他翻轉(zhuǎn)90度扭勉，就可以理解鹊奖。
flex-wrap屬性默認(rèn)是nowrap，也就是當(dāng)內(nèi)容寬度超過容器的寬度的時(shí)候涂炎，他不會換行忠聚，會以等比例的縮小來適應(yīng)父元素的寬度，例如下：
.wrapper{width:100px;height:600px;display: flex;? ? }.content-one{width:200px;height:300px;? ? }.content-two{width:200px;height:300px;? ? }
可以看到父元素的寬度只有100px唱捣，但是子元素加起來的寬度為400px两蟀，實(shí)際顯示中兩個content會等比例縮小，在這里父元素是100px震缭，那么每個content的寬度就只有50px;如果設(shè)置為flex-wrap: wrap赂毯；那么由于父容器的寬度容不下并列的兩個子元素，那么這有一個子元素就需要換到下一行；
justify-content:
設(shè)置主軸方向上元素的對齊方式：常用的有flex-start, flex-end, center, space-between, space-around党涕。如前面flex盒子可以看到主軸的方向烦感，下面是他們在主軸上的對齊方式，一眼就能夠看明白膛堤。
align-items：
在flex的盒子示意圖上手趣，可以看到有主軸，也有交叉軸肥荔，align-items就是用于設(shè)置交叉軸上各項(xiàng)目的對齊方式绿渣，可以類比justify-content。
align-content:
這是用在多根軸線的問題上燕耿，在前面看flex-wrap中提到中符，如果使用flex-wrap: wrap那么這種情況，父元素如果包容不下子元素誉帅，那么就需要換行淀散，換行就會出現(xiàn)多根軸線，如果flex-wrap: nowrap堵第，或者就是默認(rèn)設(shè)置吧凉，那么align-content是不生效的，這里需要主要踏志，然后align-content能夠設(shè)置的屬性和justify-content是一樣的阀捅，只不過一個是單行，另外一個是多行针余。
flex: number;
在項(xiàng)目中我們經(jīng)常使用flex: 1這種屬性饲鄙，flex: number 是三種屬性的簡寫：分別是flex-grow, flex-shrink，flex-basis圆雁。平時(shí)我們很少單獨(dú)來寫他們分別是多少忍级，都基本寫flex: 0，或者1伪朽。flex-grow代表項(xiàng)目的放大比例轴咱，例如父元素的寬度是300，但是子元素的寬度加起來總共才200烈涮，子元素這時(shí)候填充不滿父元素朴肺，會留下一些空白，如果設(shè)置flex-grow為1坚洽，那么子元素就會等比例增大戈稿，將父元素的300px全部填充，如果設(shè)置0就是如果沒有充滿讶舰，也不會放大鞍盗。flex-shrink就和flex-grow正好相反需了，就是如果內(nèi)容寬度超過了父元素的寬度，那么內(nèi)容就會等比率縮小般甲。
flex-basis用來設(shè)置項(xiàng)目占據(jù)主軸的初始空間肋乍，瀏覽器通過這個來計(jì)算是否有額外的空間，一般設(shè)置為auto敷存，就代表它占據(jù)的主軸空間是項(xiàng)目本身的大小住拭。一般我們都會用到flex: 1，這就代表著flex: 1 1 0%; 那么0和auto的區(qū)別是哪里呢历帚，比如說一個div的寬度是100px,如果設(shè)置他的flex-basis為0，那么他的初始寬度就為0杠娱，如果是auto挽牢，那么他的初始寬度就是100px，請記住這并不是他的最終寬度摊求，例如在flex: 1中我們設(shè)置了flex-grow和flex-shrink那么他的最終寬度父容器減去剛才設(shè)置的初始寬度然后按等比率劃分禽拔，例如
.wrapper{display: flex;width:100px;? }.content{flex:1;? }
在上面例子中，wrapper的寬度為100px室叉，content的flex-basis為0睹栖，那么初始寬度就為0，但是他的最終長度不是0茧痕，因?yàn)槲覀冊O(shè)置了其他兩個屬性野来，需要完全占據(jù)父元素，那么content的最終寬度就為100px踪旷，是不是覺得豁然開朗了曼氛。
咱么下面進(jìn)入flex的應(yīng)用。
就直接講一個稍微難一點(diǎn)的例子：
如果需要實(shí)現(xiàn)上面的情況令野，那么代碼如下：
更多的就需要自己去探索舀患，這里就不一一講解了。
快應(yīng)用之坑
1：標(biāo)簽使用受限
快應(yīng)用目前支持的標(biāo)簽特別少气破，比如說咱們要是想段落分行聊浅，不能使用
需要使用flex進(jìn)行布局，還有div標(biāo)簽中不能直接輸入文字现使，文字必須包含在span, text所支持的標(biāo)簽中低匙。
2：border使用
在以往寫style中，如果我們需要只讓元素下面有邊框朴下，直接使用border-bottom努咐。但是這里不行，我們需要這么寫：
? border:01px solid;? border-bottom:1px;
3:顏色支持
很多時(shí)候我們可以看到報(bào)警說這個顏色不支持殴胧，目前是支持16進(jìn)制的顏色渗稍，但是有時(shí)候就是說這個有錯佩迟，但是在官網(wǎng)顏色也是這么寫的。我碰到的情況：設(shè)置背景顏色竿屹，以往使用background: #fff;但是在快應(yīng)用中需要寫：
background-color:?#fff;
4: 自己支持的標(biāo)簽體驗(yàn)較差
tabs標(biāo)簽用于來切換頁面报强，支持這個確實(shí)節(jié)省了很多時(shí)間，但是用戶效果并不是很好拱燃，下拉有卡頓秉溉，并且不知道他樣式是怎么弄得，點(diǎn)擊的時(shí)候有陰影碗誉。
list效果不好召嘶，list用于用戶滑動，但是我遇到一個問題哮缺，如果在list和其他元素在同一個div下弄跌，并且div設(shè)置flex-direction，那么list的內(nèi)容無法顯示尝苇，原因是list的內(nèi)容高度變成了0铛只，需要css手動設(shè)置高度。
5：圖片無法顯示
在引入圖片的時(shí)候糠溜，如果使用桌面圖標(biāo)的圖片淳玩，就是icon地址的圖片，無論你改了名字非竿，還是放在組件目錄下蜕着，都無法顯示，必須引入icon地址的圖片汽馋。例如icon: './Common/logo.png'侮东，如果你需要使用這張圖片，必須使用Common目錄下的這張圖片豹芯，否則無法顯示悄雅。
