[Flexbox] 排版探索(一)
用CSS3 flexbox來排版忽然間就好像上了天堂, 不一定要用繁雜的grid system(或乾脆自己寫一個), 許多版型很輕鬆的就可以達成。
flexbox可以設定的參數很多, 直接拿例子來玩比較快, 這次我想排一個簡單的三排版型, 頂端有個header bar, 中間就是各式各樣的文章內容, 最下方就是footer, 放置我的版權以及其他輔助資訊這樣。
HTML結構:
<div class="Main">
<div class="Header">Header</div>
<div class="Content">Content</div>
<div class="Footer">Footer</div>
</div>
對應的CSS外觀, 把文字置中, 各個欄位用不用底色標示:
.Header, .Content, .Footer{ text-align: center;}
.Header {background: yellow;}
.Content {background: green;}
.Footer {background: blue;}
結果如下, 每個欄位高度都跟文字高度相同, 螢幕下方則是沒有被這3個區塊涵蓋到:
flex container
開始幫我們的CSS, 加入flexbox排版,
首先, 要宣告誰是flex container(爸爸), 在爸爸裡面的區塊都是這flex container的flex item(兒子):
.Main {
display: flex;
}
結果變這樣:
原來在flex container裏面兒子的排列方式預設是由左到右橫排(row), 在爸爸這邊我們加上flex-direction屬性來控制兒子的排列方式:
.Main {
display: flex;
flex-direction: column;
}
flex-direction有四種屬性值可用: row(橫排左到右), row-reverse(橫排右到左), column(直排由上到下), column-reverse(直排由下到上)
好,至少排的方向對了:
flex item
幫我們的css添上新的內容:
.Content {
flex: 1;
}
這樣是沒有變化的, 把爸爸的高度先改為固定的200px高看看:
.Main {
display: flex;
flex-direction: column;
height: 200px;
}
哇! 接近我們要的樣子了! 不過因為我們是將.Main設定固定高度, 還是沒有利用到視窗畫面(晚些處理):
flex是3個屬性的縮寫: flex-grow, flex-shrink和 flex-basis, 預設值是flex: 0 1 auto。
如果只單寫一個flex:1就等於flex-grow: 1。
flex-grow定義這個flex item長大(應用整個flex container空間)的能力。預設是0,表示不會變動,這個flex item有多長就多長。如果有一個flex item設定flow-grow為1, 那這個flex item就會用到所有flex container所剩下的空間, 如果所有flex item裏面, 有兩個設定flex-grow為1, 那麼他們兩個就會對分flex container所剩下的空間。
flex-shrink跟flex-grow相反, 預設值是1。
flex-basis是以父元素當作比較標準, 預設是auto,就是子元素本身寬度。flex-basis: 50%就是子元素本身為父元素50%寬度
直接用這個範例來改看看一下就清楚
CSS3 新單位: vh / vw
拿掉.Main的height屬性, 呼叫CSS3 vh, 讓.Main可以用到整個畫面高度：
.Main {
display: flex;
flex-direction: column;
min-height: 100vh;
}
vh(viewport height) 和 vw(viewport width)是CSS3所導入的新單位, 我們可以來設定元素相對於viewport的大小, 數值最大就是100, 100vh就是等於viewport 100%的高度。
搞定!