學習完flex的布局模式之后,我們趁熱打鐵,來實現一個BoxLayout布局.什么是BoxLayout布局?那我們先上一個圖看看

BoxLayout布局寫過后端UI代碼的編程者應該不陌生了,寫前端的代碼的也同樣很熟悉,包括html的框架frame.但以往的CSS中使用float浮動來進行控制,控制起來相對來說是復雜一些,也需要加入更多的標簽和代碼.

看完這個界面,我們就可以著手寫出標簽的代碼布局:

復制代碼代碼如下:
.<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”>
代碼很簡單,就只有二級關系,當然也可以將parent這一父級去掉,將body來當做父級,除非有必要.</code>

那我們開始用CSS來實現BorderLayout,這里同樣定義父級parent為flex容器,方向為從左至右,可以換行.

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

接著設置flex項的布局模式,header,footer我們將其設置為flex-basis:100%;因為他們占據整行,而兩個aside的寬度相等,center比兩邊的aside要寬,所以我們用flex-grow來設置他們的占據比例.
 

復制代碼代碼如下:
.header, footer{
. flex-basis: %;
.}
..center{
. flex-grow: ;
.}
.aside{
. flex-grow:;
.}
<code class=”cls hljs cs”>
這樣就實現了BorderLayout布局,是不是非常簡單.不要忘記了,要給他們設定相應的高度,和背景色,不然看到的是一片白,以為沒反應呢!我是這樣設置的,作為參考</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”>
最后測試OK!
</code>

解析四大Flex4布局方式

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

在學習Flex4的過程中，你會遇到Flex4布局的概念， 這里和大家分享一下，在FlexSDK4(Gumbo)的spark組件庫里面增加了一個page：spark.layouts。其中包括了比較重要的四個Flex4布局類（class），請看下文詳細介紹。