學習完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>

代碼很簡單,就只有二級關系,當然也可以將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!

本文屬于吳統威的博客,微信公眾號:bianchengderen 的原創文章,轉載時請注明出處及相應鏈接:http://www.wutongwei.com/front/infor_showone.tweb?id=148 ,歡迎大家傳播與分享.

另外有需要云服務器可以了解下創新互聯cdcxhl.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案，具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢，專為企業上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

當前標題：CSS3中FLEX快速實現BorderLayout布局-創新互聯
網址分享：http://vcdvsql.cn/article16/isddg.html

成都網站建設公司_創新互聯，為您提供微信公眾號、搜索引擎優化、小程序開發、App開發、網站收錄、品牌網站制作

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯