快應(yīng)用之flex布局
在我們常用的布局中有display + position + float進(jìn)行布局，但是這些布局或多或少都有些麻煩（雖然我最喜歡用position,哈哈啥都能干)。但是由于快應(yīng)用只能夠使用flex布局，flex布局和position有沖突，所以在快應(yīng)用中能夠使用的position只有fixed，而float布局總是會(huì)出現(xiàn)各種各樣的問題，flex的優(yōu)勢就顯而易見，簡單好用。
快應(yīng)用使用的是Flex布局，每個(gè)盒子都是用有一個(gè)自帶屬性就是display: flex 所以在寫css代碼的過程中，不需要我們聲明這是一個(gè)flex盒子，這是一個(gè)flex盒子的示意圖。下面介紹有關(guān)flex的一些常用基本屬性：flex-direction;flex-wrap;justify-content;align-content;align-items; flex-direction是定義主軸的方向，常用的有column，row。
<figcaption></figcaption>
在上面示意圖中可以看到main-axis就是水平的，flex-direction的默認(rèn)設(shè)置是row，也就是我們看到的情景，如果flex-direciton只需要把他翻轉(zhuǎn)90度，就可以理解。
flex-wrap屬性默認(rèn)是nowrap，也就是當(dāng)內(nèi)容寬度超過容器的寬度的時(shí)候，他不會(huì)換行，會(huì)以等比例的縮小來適應(yīng)父元素的寬度，例如下：
<div class="wrapper">
<div class="content-one">
</div>
<div class="content-two">
</div>
</div>
<style>
.wrapper {
width: 100px;
height: 600px;
display: flex;
}
.content-one {
width: 200px;
height: 300px;
}
.content-two {
width: 200px;
height: 300px;
}
</style>
復(fù)制代碼
可以看到父元素的寬度只有100px，但是子元素加起來的寬度為400px，實(shí)際顯示中兩個(gè)content會(huì)等比例縮小，在這里父元素是100px，那么每個(gè)content的寬度就只有50px;如果設(shè)置為flex-wrap: wrap；那么由于父容器的寬度容不下并列的兩個(gè)子元素，那么這有一個(gè)子元素就需要換到下一行；
justify-content:
設(shè)置主軸方向上元素的對齊方式：常用的有flex-start, flex-end, center, space-between, space-around。如前面flex盒子可以看到主軸的方向，下面是他們在主軸上的對齊方式，一眼就能夠看明白。
<figcaption></figcaption>
align-items：
在flex的盒子示意圖上，可以看到有主軸，也有交叉軸，align-items就是用于設(shè)置交叉軸上各項(xiàng)目的對齊方式，可以類比justify-content。
align-content:
這是用在多根軸線的問題上，在前面看flex-wrap中提到，如果使用flex-wrap: wrap那么這種情況，父元素如果包容不下子元素，那么就需要換行，換行就會(huì)出現(xiàn)多根軸線，如果flex-wrap: nowrap，或者就是默認(rèn)設(shè)置，那么align-content是不生效的，這里需要主要，然后align-content能夠設(shè)置的屬性和justify-content是一樣的，只不過一個(gè)是單行，另外一個(gè)是多行。
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í)候填充不滿父元素，會(huì)留下一些空白，如果設(shè)置flex-grow為1，那么子元素就會(huì)等比例增大，將父元素的300px全部填充，如果設(shè)置0就是如果沒有充滿，也不會(huì)放大。flex-shrink就和flex-grow正好相反，就是如果內(nèi)容寬度超過了父元素的寬度，那么內(nèi)容就會(huì)等比率縮小。
flex-basis用來設(shè)置項(xiàng)目占據(jù)主軸的初始空間，瀏覽器通過這個(gè)來計(jì)算是否有額外的空間，一般設(shè)置為auto，就代表它占據(jù)的主軸空間是項(xiàng)目本身的大小。一般我們都會(huì)用到flex: 1，這就代表著flex: 1 1 0%; 那么0和auto的區(qū)別是哪里呢，比如說一個(gè)div的寬度是100px,如果設(shè)置他的flex-basis為0，那么他的初始寬度就為0，如果是auto，那么他的初始寬度就是100px，請記住這并不是他的最終寬度，例如在flex: 1中我們設(shè)置了flex-grow和flex-shrink那么他的最終寬度父容器減去剛才設(shè)置的初始寬度然后按等比率劃分，例如
<div class="wapper">
<div class="content"></div>
</div>
<style>
.wrapper {
display: flex;
width: 100px;
}
.content {
flex: 1;
}
</style>
復(fù)制代碼
在上面例子中，wrapper的寬度為100px，content的flex-basis為0，那么初始寬度就為0，但是他的最終長度不是0，因?yàn)槲覀冊O(shè)置了其他兩個(gè)屬性，需要完全占據(jù)父元素，那么content的最終寬度就為100px，是不是覺得豁然開朗了。 咱么下面進(jìn)入flex的應(yīng)用。 就直接講一個(gè)稍微難一點(diǎn)的例子：
如果需要實(shí)現(xiàn)上面的情況，那么代碼如下：
<div class="wrapper">
<div></div>
<div></div>
<div class="placeholder"></div>
</div>
<style>
.wrapper {
width: 100px;
height: 100px;
border: 1px solid red;
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.wrapper div {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: gainsboro;
}
.placeholder {
visibility: hidden;
}
</style>
復(fù)制代碼
更多的就需要自己去探索，這里就不一一講解了。
快應(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: 0 1px solid;
border-bottom: 1px;
復(fù)制代碼
3:顏色支持
很多時(shí)候我們可以看到報(bào)警說這個(gè)顏色不支持，目前是支持16進(jìn)制的顏色，但是有時(shí)候就是說這個(gè)有錯(cuò)，但是在官網(wǎng)顏色也是這么寫的。我碰到的情況：設(shè)置背景顏色，以往使用background: #fff;但是在快應(yīng)用中需要寫：
background-color: #fff;
復(fù)制代碼
4: 自己支持的標(biāo)簽體驗(yàn)較差
tabs標(biāo)簽用于來切換頁面，支持這個(gè)確實(shí)節(jié)省了很多時(shí)間，但是用戶效果并不是很好，下拉有卡頓，并且不知道他樣式是怎么弄得，點(diǎn)擊的時(shí)候有陰影。 list效果不好，list用于用戶滑動(dòng)，但是我遇到一個(gè)問題，如果在list和其他元素在同一個(gè)div下，并且div設(shè)置flex-direction，那么list的內(nèi)容無法顯示，原因是list的內(nèi)容高度變成了0，需要css手動(dòng)設(shè)置高度。
5：圖片無法顯示
在引入圖片的時(shí)候，如果使用桌面圖標(biāo)的圖片，就是icon地址的圖片，無論你改了名字，還是放在組件目錄下，都無法顯示，必須引入icon地址的圖片。例如icon: './Common/logo.png'，如果你需要使用這張圖片，必須使用Common目錄下的這張圖片，否則無法顯示。
6：調(diào)試?yán)щy
我們需要手機(jī)和電腦處于同一局域網(wǎng)，手機(jī)需要開啟代理，這還不夠，電腦需要攔截，我用的charles，在線更新的時(shí)候，必須開啟charles，特別麻煩，而且手機(jī)開了代理，有些網(wǎng)頁就上不了，電腦同樣如此。
IDE
華為開發(fā)了一個(gè)用于開發(fā)快應(yīng)用的IDE，下載地址為http://developer.huawei.com/consumer/cn/service/hms/catalog/fastapp.html?page=fastapp_fastapp_devprepare_install_tool，大家可以去試一下。我用了一下，ide特別吃內(nèi)存，一開我電腦就死機(jī)，需要自己配置，所以干脆就沒用這個(gè)ide了。
結(jié)語
總之目前，快應(yīng)用開發(fā)確實(shí)有些困難，任重道遠(yuǎn)，希望大家能夠團(tuán)結(jié)協(xié)作，讓快應(yīng)用開發(fā)體驗(yàn)更好。貼一個(gè)快應(yīng)用微信群，一起學(xué)習(xí)，一起進(jìn)步
