深入解析CSS FlexBox
Flexbox是一個CSS3的盒子模型(box model),顧名思義它就是一個靈活的盒子(Flexible Box)。
Flexbox模型概念
第一步要來看Flexbox的盒子模型,根據W3C文章所描述,flex的盒子模型如下圖所呈現,與一般的盒子模型不同的地方,在於Flexbox的盒子模型具有水平的起點與終點(main start、main end),垂直的起點與終點(cross start、cross end),水平軸與垂直軸(main axis、cross axis),然後元素具有水平尺寸與垂直尺寸(main size、cross size),這些都是相當重要的佈局概念。
Flexbox屬性介紹
再來我們先看看Flexbox有哪些屬性:
- display
- flex-direction
- justify-content
- align-items
- align-self
- align-content
- flex-wrap
- order
- flex
display
display是我們熟知的CSS屬性,對於Flexbox來說,多了有兩種方式可以設定,預設為“flex”,其佈局方式與block幾乎類似,都會強迫換行,但設定display:flex的子元素卻具備了更多彈性的設定,此外另外一種方式則是“inline-flex”,和inline-block也是幾乎雷同,意義上都是一個display:flex的元素外面包覆display:inline的屬性,在後方的元素不會換行。
CSS:
.flex, .inline-flex{ width:100px; height:50px; border:1px solid #000; } .flex{ display:flex; } .inline-flex{ display:inline-flex; }
flex-direction
flex-direction表示Flexbox內容元素的“排列方向”,分別有下列四種。
- row:預設值,由左到右,從上到下
- row-reverse:與row相反
- column:從上到下,再由左到右
- column-reverse:與column相反
CSS:
.flex-row{ flex-direction:row; } .flex-row-reverse{ flex-direction:row-reverse; } .flex-column{ flex-direction:column; } .flex-column-reverse{ flex-direction:column-reverse; }
justify-content
justify-content決定了內容元素與整個Flexbox的“水平對齊”位置,回想一下最上面講的Flexbox盒子模型,具有main start與main end左右兩個端點,justify-content就是按照這個方式做設定,而其中的設定值總共有下列五個。
- flex-start:預設值,對齊最左邊的main start
- flex-end:對齊最左邊的main end
- center:水平居中
- space-between:平均分配內容元素,左右元素將會與main start和main end貼齊
- space-around:平均分配內容元素,間距也是平均分配
CSS:
.flex-start{ justify-content:flex-start; } .flex-end{ justify-content:flex-end; } .center{ justify-content:center; } .space-between{ justify-content:space-between; } .space-around{ justify-content:space-around; }
align-items
align-items剛好和justify-content相反,align-items決定了內容元素與整個Flexbox的“垂直對齊”位置,再回想一下最上面講的Flexbox盒子模型,具有cross start與cross end左右兩個端點,align-items與align-self就是按照這個方式做設定,設定值總共有下列五個。
- flex-start:對齊最上面的cross start
- flex-end:對齊最下面的cross end
- center:垂直居中
- stretch:預設值,將內容元素全部撐開至Flexbox的高度
- baseline:以所有內容元素的基線作為對齊標準
CSS:
.flex-start{ align-items:flex-start; } .flex-end{ align-items:flex-end; } .center{ align-items:center; } .stretch{ align-items:stretch; } .baseline{ align-items:baseline; } .flex-item{ width:60px; text-align:center; } .item1{ font-size:20px; line-height: 60px; background:#c00; } .item2{ line-height: 30px; background:#095; } .item3{ font-size:30px; line-height: 100px; background:#059; }
align-self
align-self的設定與align-items相同,但目的不同,align-self的作用在於覆蓋已經套用align-items的屬性,如果照我們以前所寫,因為align-items是針對所有子元素,所以必須要用align-self來進行覆蓋,我們直接用上一個示例來修改就很清楚了。
CSS:
.item2{ align-self:baseline; line-height: 30px; background:#095; }
align-content
剛剛談到的align-items是針對內容為單行的元素進行處理,如果遇到多行的元素,就要使用align-content這個屬性,這個屬性總共有六個設定值。
- flex-start:對齊最上面的cross start
- flex-end:對齊最下面的cross end
- center:垂直居中
- space-between:將第一行與最後一行分別對齊最上方與最下方
- space-around:每行平均分配間距
- stretch:預設值,內容元素全部撐開
CSS:
.flex-start, .flex-end, .center, .space-between, .space-around, .stretch{ display:inline-flex; flex-wrap:wrap; width:180px; height:160px; margin:5px 5px 40px; border:1px solid #000; vertical-align: top; } .flex-start{ align-content:flex-start; } .flex-end{ align-content:flex-end; } .center{ align-content:center; } .space-between{ align-content:space-between; } .space-around{ align-content:space-around; } .stretch{ align-content:stretch; } .align-content>div{ padding:15px; margin:2px; background:#666; }
flex-wrap
在剛剛的示例看到一個flex-wrap的屬性,這個屬性負責的是讓內容的元素換行,因為當我們把父元素的display設定為flex或inline-flex的時候,子元素就是以單行的方式,彈性撐滿父元素,所以就要利用flex-wrap來換行,共有三個設定值。
- nowrap:預設值,單行
- wrap:多行
- wrap-reverse:多行,但內容元素反轉
CSS:
.nowrap, .wrap, .wrap-reverse{ display:inline-flex; flex-wrap:wrap; width:180px; height:80px; margin:5px 5px 40px; border:1px solid #000; vertical-align: top; } .column{ flex-direction:column; width:120px; height:180px; } .nowrap{ flex-wrap:nowrap; } .wrap{ flex-wrap:wrap; } .wrap-reverse{ flex-wrap:wrap-reverse; } .align-content div{ width:30px; height:30px; margin:5px; background:#069; } .column div{ background:#f50; }
order
剛剛在flex-wrap的屬性裡頭看到了可以把元素反轉,order這個屬性更是可以直接指定一個數字,就可以由小到大的排列順序。
.item{ width:50px; height:60px; text-align: center; line-height: 50px; } .order1{ order:1; background:#c00; } .order2{ order:2; background:#069; } .order3{ order:3; background:#095; } .order4{ order:4; background:#f50; } .order5{ order:5; background:#777; } .order6{ order:6; background:#077; }
flex
好酒沉甕底,有耐心看到下面的才會看到重點喔哈哈!flex應該是Flexbox裡頭最重要的屬性了,而flex其實是由三個屬性組合而成,依照先後順序分別是“flex-grow”、“flex-shrink”和“flex-basis”,如果flex只填了一個數值(無單位),那麼預設就是以flex-grow的方式呈現,至於三個屬性的解釋如下:
- flex-grow: 數字,無單位,當子元素的flex-basis長度“小”於它自己在父元素分配到的長度,按照數字做相對應的“伸展”比例分配,預設值為0,不會進行彈性變化,不可為負值,設為1則會進行彈性變化。
- flex-shrink: 數字,無單位,當子元素的flex-basis長度“大”於它自己在父元素分配到的長度,按照數字做相對應的“壓縮”比例分配,預設值為1,設為0的話不會進行彈性變化,不可為負值。
- flex-basis: 子元素的基本大小,作為父元素的大小比較基準,預設值為0,也因為預設值為0,所以沒有設定此屬性的時候,會以直接採用flex-grow屬性,flex-basis也可以設為auto,如果設為auto,就表示子元素以自己的基本大小為單位。
三個屬性可以分開設定,也可以合在一起用一個flex統一設定,下面的例子展現出同一個Flexbox,在不同的寬度,子元素會有不同大小的呈現。
HTML:
<div class="flex flex-300"> <div class="item item1">1</div> <div class="item item2">2</div> </div> <div class="flex flex-150"> <div class="item item1">1</div> <div class="item item2">2</div> </div>
CSS:
.flex{ display:inline-flex; height:60px; margin:5px 5px 40px; border:1px solid #000; vertical-align: top; } .flex-300{ width:300px; } .flex-150{ width:80px; } .item{ height:60px; text-align: center; line-height: 50px; } .item1{ flex:1 2 200px; background:#c00; } .item2{ flex:2 1 100px; background:#069; }
如果用動畫來表現,可以看出拉長的時候紅色會變得比藍色長,但壓縮的時候卻是藍色變得比紅色長,如此一來就更能體會flex在響應式設計裡頭的關鍵角色。
以上就是Flexbox的完整介紹,因為有了這個屬性,讓在做layout的佈局又更加彈性了!