CSS3 中FLEX快速實現BorderLayout布局

學習完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 ,歡迎大家傳播與分享.