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!
以上是CSS3中FLEX快速實現BorderLayout佈局的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
