學(xué)習(xí)完flex的布局模式之后,我們趁熱打鐵,來實現(xiàn)一個BoxLayout布局.什么是BoxLayout布局?那我們先上一個圖看看
BoxLayout布局寫過后端UI代碼的編程者應(yīng)該不陌生了,寫前端的代碼的也同樣很熟悉,包括html的框架frame.但以往的CSS中使用float浮動來進行控制,控制起來相對來說是復(fù)雜一些,也需要加入更多的標(biāo)簽和代碼.
看完這個界面,我們就可以著手寫出標(biāo)簽的代碼布局:
代碼很簡單,就只有二級關(guān)系,當(dāng)然也可以將parent這一父級去掉,將body來當(dāng)做父級,除非有必要.
那我們開始用CSS來實現(xiàn)BoxLayout,這里同樣定義父級parent為flex容器,方向為從左至右,可以換行.
.parent{ display: flex; flex-direction: row; flex-wrap: wrap; text-align: center; }接著設(shè)置flex項的布局模式,header,footer我們將其設(shè)置為flex-basis:100%;因為他們占據(jù)整行,而兩個aside的寬度相等,center比兩邊的aside要寬,所以我們用flex-grow來設(shè)置他們的占據(jù)比例.
header, footer{ flex-basis: 100%; }.center{ flex-grow: 3; }aside{ flex-grow:1; }這樣就實現(xiàn)了BoxLayout布局,是不是非常簡單.不要忘記了,要給他們設(shè)定相應(yīng)的高度,和背景色,不然看到的是一片白,以為沒反應(yīng)呢!我是這樣設(shè)置的,作為參考
.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!
本文屬于吳統(tǒng)威的博客,微信公眾號:bianchengderen 的原創(chuàng)文章,轉(zhuǎn)載時請注明出處及相應(yīng)鏈接:http://www.wutongwei.com/front/infor_showone.tweb?id=148 ,歡迎大家傳播與分享.
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
重慶分公司
重慶分公司
