CSS3 flex布局之快速實現(xiàn)BorderLayout布局

2024-07-11 08:29:35

字體：大中小

供稿：網(wǎng)友

學(xué)習(xí)完flex的布局模式之后,我們趁熱打鐵,來實現(xiàn)一個BoxLayout布局.什么是BoxLayout布局?那我們先上一個圖看看

BoxLayout布局寫過后端UI代碼的編程者應(yīng)該不陌生了,寫前端的代碼的也同樣很熟悉,包括html的框架frame.但以往的CSS中使用float浮動來進(jìn)行控制,控制起來相對來說是復(fù)雜一些,也需要加入更多的標(biāo)簽和代碼.

看完這個界面,我們就可以著手寫出標(biāo)簽的代碼布局:

復(fù)制代碼

代碼如下:
.<div class="parent">
. <header>北</header>
. <aside class="left">東</aside>
. <div class="center">中</div>
. <aside class="righ">西</aside>
. <footer>南</footer>
.</div>
<code class="cls hljs cs">
代碼很簡單,就只有二級關(guān)系,當(dāng)然也可以將parent這一父級去掉,將body來當(dāng)做父級,除非有必要.</code>

那我們開始用CSS來實現(xiàn)BorderLayout,這里同樣定義父級parent為flex容器,方向為從左至右,可以換行.

復(fù)制代碼

代碼如下:
..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ù)比例.

復(fù)制代碼

代碼如下:
.header, footer{
. flex-basis: %;
.}
..center{
. flex-grow: ;
.}
.aside{
. flex-grow:;
.}
<code class="cls hljs cs">
這樣就實現(xiàn)了BorderLayout布局,是不是非常簡單.不要忘記了,要給他們設(shè)定相應(yīng)的高度,和背景色,不然看到的是一片白,以為沒反應(yīng)呢!我是這樣設(shè)置的,作為參考</code>
..parent{
. display: flex;
. flex-direction: row;
. flex-wrap: wrap;
. text-align: center;
.}
.header,footer,aside,.center{
. padding: px;;
.}
..center,aside{
. min-height: px;
.}
.header, footer{
. flex-basis: %;
. min-height: px;
.}
.header{
. background-color: cadetblue;
.}
.footer{
. background-color: darkgrey;
.}
..center{
. flex-grow: ;
.}
.aside{
. flex-grow:;
. background-color: bisque;
.}
<code class="cls hljs cs">
最后測試OK!
</code>

上一篇：CSS文本超出div或者span時用省略號代替

下一篇：CSS3 text shadow字體陰影效果

發(fā)表評論

共有條評論