CSS3 flex布局之快速實現(xiàn)BorderLayout布局
我要評論學習完flex的布局模式之后,我們趁熱打鐵,來實現(xiàn)一個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>
<code class="cls hljs cs">
代碼很簡單,就只有二級關(guān)系,當然也可以將parent這一父級去掉,將body來當做父級,除非有必要.</code>
那我們開始用CSS來實現(xiàn)BorderLayout,這里同樣定義父級parent為flex容器,方向為從左至右,可以換行.
..parent{
. display: flex;
. flex-direction: row;
. flex-wrap: wrap;
. text-align: center;
.}
接著設置flex項的布局模式,header,footer我們將其設置為flex-basis:100%;因為他們占據(jù)整行,而兩個aside的寬度相等,center比兩邊的aside要寬,所以我們用flex-grow來設置他們的占據(jù)比例.
.header, footer{
. flex-basis: %;
.}
..center{
. flex-grow: ;
.}
.aside{
. flex-grow:;
.}
<code class="cls hljs cs">
這樣就實現(xiàn)了BorderLayout布局,是不是非常簡單.不要忘記了,要給他們設定相應的高度,和背景色,不然看到的是一片白,以為沒反應呢!我是這樣設置的,作為參考</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>
解析四大Flex4布局方式
本文向大家介紹一下四個Flex4布局類的用法，它們分別是：BasicLayout、HorizontalLayout、TileLayout、VerticalLayout。
在學習Flex4的過程中，你會遇到Flex4布局的概念， 這里和大家分享一下，在FlexSDK4(Gumbo)的spark組件庫里面增加了一個page：spark.layouts。其中包括了比較重要的四個Flex4布局類（class），請看下文詳細介紹。
四種Flex4布局類概述
在FlexSDK4(Gumbo)的spark組件庫里面增加了一個page：spark.layouts。其中包括了比較重要的四個Flex4布局類（class），分別是：BasicLayout、HorizontalLayout、TileLayout、VerticalLayout。
1、BasicLayoutFlex4布局：
（默認屬性，當不指定定位后，則是絕對定位布局）
這是spark組件默認FlexSDK3的布局方式，即絕對定位布局。在FlexSDK3里面對應的是：layout="absolute"
2、HorizontalLayoutFlex4布局：
這是spark組件庫里面的水平布局方式。在里面對應的是：layout="horizontal"
3、VerticalLayoutFlex4布局：
這是spark組件庫里面的豎直布局方式。在FlexSDK3里面對應的是：layout="vertical"
4、TileLayoutFlex4布局：
這是spark組件庫新增的布局方式，即格子布局方式。TileLayout布局方式可以說是HorizontalLayout和VerticalLayout結(jié)合的方式。
腳本之家提醒大家還有一點是需要注意的：
paddingLeft、paddingRight、paddingTop、paddingBottom
這四個屬性已經(jīng)轉(zhuǎn)移到了HorizontalLayout、VerticalLayout里面。這點也與FlexSDK3有些區(qū)別。也就是說，在spark組件中的容器，已經(jīng)不具備paddingLeft、paddingRight、paddingTop、paddingBottom屬性了。
相關(guān)文章
本篇文章主要介紹了淺談CSS3中display屬性的Flex布局的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-14- Flexbox通常能讓我們更好的操作他的子元素布局,這里稍微來提煉一下移動端Web頁面的CSS3 flex布局快速上手指南,需要的朋友可以參考下2016-05-31
這篇文章主要介紹了詳解CSS3伸縮布局盒模型Flex布局的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-20
