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>
代碼很簡單,就只有二級關係,當然也可以將parent這一父級去掉,將body來當做父級,除非有必要.
那我們開始用CSS來實現BoxLayout,這裡同樣定義父級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: 100%;}.center{ flex-grow: 3;}aside{ flex-grow:1;}
這樣就實現了BoxLayout布局,是不是非常簡單.不要忘記了,要給他們設定相應的高度,和背景色,不然看到的是一片白,以為沒反應呢!我是這樣設定的,作為參考
.parent{ display: flex; flex-direction: row; flex-wrap: wrap; text-align: center;}header,footer,aside,.center{ padding: 10px;;}.center,aside{ min-height: 300px;}header, footer{ flex-basis: 100%; min-height: 80px;}header{ background-color: cadetblue;}footer{ background-color: darkgrey;}.center{ flex-grow: 3;}aside{ flex-grow:1; background-color: bisque;}
最後測試OK!