學(xué)習(xí)完flex的布局模式之后,我們趁熱打鐵,來(lái)實(shí)現(xiàn)一個(gè)BoxLayout布局.什么是BoxLayout布局?那我們先上一個(gè)圖看看

BoxLayout布局寫(xiě)過(guò)后端UI代碼的編程者應(yīng)該不陌生了,寫(xiě)前端的代碼的也同樣很熟悉,包括html的框架frame.但以往的CSS中使用float浮動(dòng)來(lái)進(jìn)行控制,控制起來(lái)相對(duì)來(lái)說(shuō)是復(fù)雜一些,也需要加入更多的標(biāo)簽和代碼.

看完這個(gè)界面,我們就可以著手寫(xiě)出標(biāo)簽的代碼布局:

復(fù)制代碼代碼如下:
.<div class=”parent”>
. <header>北</header>
. <aside class=”left”>東</aside>
. <div class=”center”>中</div>
. <aside class=”righ”>西</aside>
. <footer>南</footer>
.</div>
<code class=”cls hljs cs”>
代碼很簡(jiǎn)單,就只有二級(jí)關(guān)系,當(dāng)然也可以將parent這一父級(jí)去掉,將body來(lái)當(dāng)做父級(jí),除非有必要.</code>

那我們開(kāi)始用CSS來(lái)實(shí)現(xiàn)BorderLayout,這里同樣定義父級(jí)parent為flex容器,方向?yàn)閺淖笾劣?可以換行.

復(fù)制代碼代碼如下:
..parent{
. display: flex;
. flex-direction: row;
. flex-wrap: wrap;
. text-align: center;
.}

接著設(shè)置flex項(xiàng)的布局模式,header,footer我們將其設(shè)置為flex-basis:100%;因?yàn)樗麄冋紦?jù)整行,而兩個(gè)aside的寬度相等,center比兩邊的aside要寬,所以我們用flex-grow來(lái)設(shè)置他們的占據(jù)比例.
 

復(fù)制代碼代碼如下:
.header, footer{
. flex-basis: %;
.}
..center{
. flex-grow: ;
.}
.aside{
. flex-grow:;
.}
<code class=”cls hljs cs”>
這樣就實(shí)現(xiàn)了BorderLayout布局,是不是非常簡(jiǎn)單.不要忘記了,要給他們?cè)O(shè)定相應(yīng)的高度,和背景色,不然看到的是一片白,以為沒(méi)反應(yīng)呢!我是這樣設(shè)置的,作為參考</code>
..parent{
. display: flex;
. flex-direction: row;
. flex-wrap: wrap;
. text-align: center;
.}
.header,footer,aside,.center{
. padding: px;;
.}
..center,aside{
. min-height: px;
.}
.header, footer{
. flex-basis: %;
. min-height: px;
.}
.header{
. background-color: cadetblue;
.}
.footer{
. background-color: darkgrey;
.}
..center{
. flex-grow: ;
.}
.aside{
. flex-grow:;
. background-color: bisque;
.}
<code class=”cls hljs cs”>
最后測(cè)試OK!
</code>

解析四大Flex4布局方式

本文向大家介紹一下四個(gè)Flex4布局類(lèi)的用法，它們分別是：BasicLayout、HorizontalLayout、TileLayout、VerticalLayout。

在學(xué)習(xí)Flex4的過(guò)程中，你會(huì)遇到Flex4布局的概念， 這里和大家分享一下，在FlexSDK4(Gumbo)的spark組件庫(kù)里面增加了一個(gè)page：spark.layouts。其中包括了比較重要的四個(gè)Flex4布局類(lèi)（class），請(qǐng)看下文詳細(xì)介紹。