10分鐘學會基本的 Flexbox 佈局
什麼是 Flexbox ?
Flexbox 是 flexible box 的簡稱(愚人碼頭注:意思是“靈活的盒子容器”),是 CSS3 引入的新的佈局模式。它決定了元素如何在頁面上排列,使它們能在不同的螢幕尺寸和裝置下可預測地展現出來。
它之所以被稱為 Flexbox ,是因為它能夠擴充套件和收縮 flex 容器內的元素,以最大限度地填充可用空間。與以前佈局方式(如 table 佈局和浮動元素內嵌塊元素)相比,Flexbox 是一個更強大的方式:
- 在不同方向排列元素
- 重新排列元素的顯示順序
- 更改元素的對齊方式
- 動態地將元素裝入容器
什麼情況下不建議使用 Flexbox ?
雖然 Flexbox 非常適合縮放,對齊和重新排序元素,但以下情況應該儘量避免使用 Flexbox 佈局:
- 整體頁面佈局
- 完全支援舊瀏覽器的網站
瀏覽器支援 Flexbox 的情況:
舊版瀏覽器,如IE 11或更低版本,不支援或僅部分支援 Flexbox 。如果你想安全的使用頁面正常呈現,你應該退回到其他的 CSS 佈局方式,比如結合float
的 display:
inline-block
或者 display:
table
等。但是,如果您只針對現代瀏覽器,那麼 Flexbox 絕對值得一試。
術語
在 Flexbox 模型中,有三個核心概念:
– flex 項(愚人碼頭注:也稱 flex 子元素),需要佈局的元素
– flex 容器,其包含 flex 項
– 排列方向(direction),這決定了 flex 項的佈局方向(愚人碼頭注:更多的文章叫主軸)
最好的學習方式是從經驗和例子中學習,所以讓我們開始吧!博銀財富http://www.boyingold.com/
Level 1 — 基礎
1)建立一個 flex 容器
HTML 程式碼:
CSS 程式碼:
- .flex-container {
- display: flex;
- }
要建立一個 flex 容器,您只需要將一個 display:
flex
屬性新增到一個元素上。預設情況下,所有的直接子元素都被認為是 flex 項,並從左到右依次排列在一行中。如果 flex 項的寬度總和大於容器,那麼 flex 項將按比例縮小,直到它們適應 flex 容器寬度。
2)將 flex 項排成一列
CSS 程式碼:
- .flex-container {
- display: flex;
- flex-direction: column;
- }
可以通過(在 flex 容器中)設定 flex-direction:
column
使 flex 項垂直佈局。也可以通過設定 flex-direction:
column-reverse
或 flex-direction:
row-reverse
來使 flex 項以相反的順序排列。
CSS 程式碼:
- .flex-container {
- display: flex;
- flex-direction: column-reverse;
- }
Level 2 — 新手
1)靠右對齊的 flex 項
CSS 程式碼:
- .flex-container {
- display: flex;
- justify-content: flex-end;
- }
回想一下,每個 Flexbox 模型都有 flex 方向(主軸)。justify-content
用於指定
flex 項在 flex 方向(direction)上的對齊位置。在上面的例子中,justify-content:flex-end
表示
flex 項在水平方向上靠 flex 容器的末端對齊。這就是為什麼他們被放在了右邊。
2)居中對齊的 flex 項
CSS 程式碼:
- .flex-container {
- display: flex;
- justify-content: center;
- }
3)鋪開的 flex 項
您可以通過使用以下 justify-content
屬性的三個間距值之一來指定容器中
flex 項之間應顯示多少空間:
-
space-evenly
: flex 容器起始邊緣和第一個 flex 項之間的間距和每個相鄰 flex 項之間的間距是相等。(愚人碼頭注:該屬性以前很少看到,原因是以前瀏覽器不支援,chrome 也是 60 版本之後才支援。延伸一下,align-content: space-evenly
也是這個邏輯,建議在 chrome 60 下檢視這個demo 。 ) -
space-between
: 任何兩個相鄰 flex 項之間的間距是相同的,但不一定等於第一個/最後一個 flex 項與 flex 容器邊緣之間的間距;起始邊緣和第一個專案之間的間距和末端邊緣和最後一個專案之間的間距是相等的。 -
space-around
: flex 容器中的每個 flex 項的每一側間距都是相等的。請注意,這意味著兩個相鄰 flex 項之間的空間將是第一個/最後一個 flex 項與其最近邊緣之間的空間的兩倍。
愚人碼頭注:網上找了一張圖片能更好的解釋 justify-content
屬性值的表現,如圖:
4)flex 項在交叉軸上的對齊
CSS 程式碼:
- .flex-container {
- display: flex;
- justify-content: center;
- align-items: center;
- }
通常,我們想沿著 flex 方向(主軸)排列 flex 項,還可以在垂直於它的方向(交叉軸)上對齊 flex 項。通過設定 justify-content:center
和align-items:center
,可以使
flex 項水平和垂直放置在 flex 容器的中心。
5)對齊某個特定的 flex 項
CSS 程式碼:
- .flex-container {
- display: flex;
- align-items: center;
- }
- .flex-bottom {
- align-self: flex-end;
- }
可以在某個特定的 flex 項上使用 align-self CSS 屬性,來使該特定的 flex 項與容器中的其他 flex 項進行對齊。
Level 3 — 中級
1)允許 flex 項多行/列排列
CSS 程式碼:
- .flex-container {
- display: flex;
- flex-wrap: wrap;
- }
預設情況下, flex 項不允許多行/列排列,如果 flex 容器尺寸對於所有 flex 項來說不夠大,那麼flex 項將被調整大小以適應單行或列排列。
通過新增 flex-wrap:
wrap
,可以將溢位容器的 flex 項將被排列到另一行/列中。
2)flex 項反向多行/列排列
CSS 程式碼:
- .flex-container {
- display: flex;
- flex-wrap: wrap-reverse;
- }
flex-wrap:wrap-reverse
仍然使
flex 項以多行/列排列,但是它們從 flex 容器的末尾開始排列的。
3)多行/列排列的 flex 項在交叉軸上的對齊方式
CSS 程式碼:
- .flex-container {
- display: flex;
- flex-wrap: wrap;
- align-content: flex-start;
- }
預設情況下,當 flex 容器的交叉軸(cross axis)上存在多餘空間時,您可以在 flex 容器上設定 align-content
,以控制
flex 項在交叉軸(cross axis)上的對齊方式。可能的值是flex-start
,flex-end
,center
,space-between
,space-around
,space-evenly
和 stretch
(預設)。
Level 4 — 高階
1)拉伸 flex 項
CSS 程式碼:
- .flex-container {
- display: flex;
- }
- .flex-item.nth-of-type(1){
- flex-grow:1;
- }
- .flex-item.nth-of-type(2){
- flex-grow:2;
- }
flex-grow
只有在
flex 容器中有剩餘空間時才會生效。flex 項的 flex-grow
屬性指定該
flex 項相對於其他 flex 項將拉伸多少,以填充 flex 容器。預設值為1
。當設定為 0
時,該
flex 項將不會被拉伸去填補剩餘空間。在這個例子中,兩個項的比例是 1:2,意思是在被拉伸時,第一個 flex 項將佔用 1/3,而第二個 flex 項將佔據餘下的空間。
愚人碼頭注:這裡特別要注意的是 flex-grow
控制的是
flex 項的拉伸比例,而不是佔據 flex 容器的空間比例。
2)收縮元素
CSS 程式碼:
- .flex-container {
- display: flex;
- }
- .flex-item:nth-of-type(1){
- flex-shrink:1;
- }
- .flex-item:nth-of-type(2){
- flex-shrink:2;
- }
flex-shrink
只有在
flex 容器空間不足時才會生效。它指定 flex 項相對於其他 flex 項將縮小多少,以使 flex 項不會溢位 flex 容器。 預設值為 1
。當設定為0
時,該
flex 項將不會被收縮。在這個例子中,比例是1:2,意思是在收縮時,第一項將收縮 1/3 ,而第二個專案將被收縮 2/3 。愚人碼頭注: flex-shrink
和 flex-grow
正好相反
3)設定元素的大小
CSS 程式碼:
- .flex-container {
- display: flex;
- }
- .flex-item.nth-of-type(1){
- flex-basis:200px;
- }
- .flex-item.nth-of-type(2){
- flex-basis:10%;
- }
您可以使用 flex-basis
定製
flex 項尺寸來代替元素的初始大小。預設情況下,其值為 flex-basis:
auto
,這意味該尺寸著從非 Flexbox CSS規則計算的。您還可以將其設定為某個絕對值或相對於 flex 容器百分比的值;例如 flex-basis:200px
和flex-basis:10%
。
4)將 flex-grow, flex-shrink, 和 flex-basis 放在一起
CSS 程式碼:
- .flex-container {
- display: flex;
- }
- .flex-item:nth-of-type(1){
- flex:10100px;
- }
- .flex-item:nth-of-type(2){
- flex:2010%;
- }
flex
是 flex-grow
,flex-shrink
和 flex-based
的縮寫。在這個例子中,第一個
flex 項設定為flex-grow:
1
,flex-shrink:
0
,flex-basis:
100px
,第二個 flex 項設定為flex-grow:
2
,flex-shrink:
0
,flex-basis:
10%
。
分析一下上面的這個例子,由於在 flex 容器(200px)中存在剩餘空間 (90px),只有 flex-grow
才能起作用,flew-shrink
被忽略。第一個
flex 項的flex-grow
為 1
,第2個
flex 項的flex-grow
為2
,所以第1個
flex 項拉伸 30px,第2個 flex 項拉伸 60px。
總結
Flexbox 易於學習和操作。 因為 Web 開發週期短,迭代速度很快,所以對其使用的知識尤其有用。如果你想在你的專案中使用 Flexbox 之前進行更多地嘗試,您可以訪問 Flexyboxes 和 Flexbox Froggy 練習。你也可以閱讀 CSS trick: Flexbox 指南 和 W3C:CSS Flexible Box。