彈性排版 flex
flex 或 flexbox 是 CSS 排版的大怪獸,只要學會這幾行 CSS ,就可以取代許多 CSS 的排版框架。尤其是目前行動裝置當道,flex 排版可以讓版面自動適應各種尺寸的螢幕。
flex 尤其適合單一方向的內容排列(水平或垂直),如果需要同時運用水平和垂直排列互相交錯,就要使用網格排版 (grid) 較適合。
這邊有幾個遊戲可以邊玩邊學習 flex 排版。
要講flex 排版時要先認識軸向。主軸指的是項目流動的方向,比如說下方的例子主軸就是水平由左至右,和主軸垂直的叫做相交軸。
主軸的起始點為 main-start 終點為 main-end;相交軸的起始點為 cross-start 終點為 cross-end
下面陸續講到的例子也會有主軸由右至左,或是由上到下,甚至是由下到上的狀況,在那個時候相交軸的方向也會隨之變化。
flex 會把屬性給子代繼承,但是不會影響後續的後裔元素。
如以下範例,boxies的屬性,會由子代的三個 <div> 元素繼承。
.boxies { display: flex; /*宣告為彈性佈局元素*/ justify-content: space-between; /*相同間距*/ }
<div class="boxies"> <div>1</div> <div>2</div> <div>3 <br>3-1 <br>3-2 <br>3-3 </div> </div>
3-1
3-2
這個例子除了三個盒子彼此分開,用掉所有水平空間,並保持兩兩之間距離相同,以及高度相同(因為第三個盒子的內容有換行,所以另外兩個盒子跟著增高)
上面除了用 display: flex 宣告 boxies 為彈性元素(彈性容器)以外,也用到了 justify-content (內容佈局)這個屬性,說明如下。
*Q:彈性容器是什麼? A:以上面的例子來說,灰色框的元素就是「彈性容器」,用來裝裡面三個有顏色的盒子,這三個盒子稱為「彈性項目」。
• justify-content
主軸上的排列方式
justufy-content 有以下的值:
- flex-start 預設值,靠主軸起始處並排
- flex-end 靠主軸結束處並排
- center 置中並排
- space-between 分散到整個空間,第一個貼齊軸線起點,最後一個貼齊軸線末端
- space-around 將剩下的空間平均分配在「每個元素的兩側」
- space-evenly 將剩下的空間平均分佈在每個元素(包含軸線的起點和終點)之間
justify-content:flex-start; ⤵
justify-content:flex-end; ⤵
justify-content:center; ⤵
justify-content:space-between; ⤵
justify-content:space-around; ⤵
justify-content:space-evenly; ⤵
• flex-direction
主軸的方向
接下來我們再增加 flex-direction 這個屬性,這個屬性有以下的值:
- row (水平由左至右)
- row-reverse (水平由右至左)
- column (垂直由上到下)
- column-reverse (垂直由下到上)
.boxies { display: flex; /*宣告為彈性佈局元素*/ flex-direction:row; /*水平由左排列(自動垂直方向撐滿)*/ }
flex-direction: row-reverse;/*水平由右排列(自動垂直方向撐滿)*/
flex-direction: column;/*垂直由上排列(自動水平方向撐滿)*/
*如果要把文字改成直書,要用 writing-mode 語法,而不是用上面這個。
flex-direction: column-reverse;/*垂直由下排列(自動水平方向撐滿)*/
• flex-wrap
flex-wrap 換行屬性有以下值:
- nowrap (不換行)
- wrap (超出範圍時自動換行,下一行出現在下方)
- wrap-reverse(超出範圍時自動換行,下一行出現在上方)
flex-wrap: nowrap;
flex-wrap: wrap;
▼不只自動換行,還反轉順序
flex-wrap: wrap-reverse;
• flex-flow
flex-flow 可以用來同時定義 flex-direction 和 flex-wrap,如下
flex-flow: colum wrap; /*垂直流動+自動換行*/
• align-items
前面第一小節提到的的 justify-content 是用來定義在主軸上的對齊方式,而 align-items 則是用來定義元素在相交軸上的對齊方式。
align-items 有以下值:
- flex-start
- flex-end
- center
- baseline
- stretch
display:flex; flex-direction: row; align-items: flex-start;
one
one
two
three
three
display:flex; flex-direction: row; align-items: flex-end;
one
one
two
three
three
display:flex; flex-direction: row; align-items: center;
one
one
two
three
three
display:flex; flex-direction: row; align-items: baseline;/*對齊第一排文字的基準線*/
one
one
two
three
three
display:flex; flex-direction: row; align-items: stretch;
one
one
two
three
three
垂直排列的時候如下
display:flex; flex-direction: column; align-items: flex-start;
display:flex; flex-direction: column; align-items: flex-end;
display:flex;
flex-direction: column;
align-items: center;
display:flex; flex-direction: column; align-items: baseline;
display:flex; flex-direction: column; align-items: stretch;
*如果有定義某一邊的 margin 則會影響排列的狀況
以下第2個元素以定義左邊的邊緣,第四個元素有定義右邊的邊緣
display:flex; flex-direction: column; align-items: stretch;
align-self
align-self 可以用來覆寫由 align-items 繼承下來的對齊屬性,比如說有一組 boxes 都繼承了 align-items 的對齊上緣屬性,但其中一個希望另外宣告,就可以套用 align-self 屬性來個別宣告。
▼”two” 這一個 box 自己套用 align-self:flex-end;
one
one
two
three
three
align-content
相對於 justify-content ,align-content 是於相交軸上的排列方式。
.flex-container{ display:flex; flex-flow:row wrap; align-items: flex-start; border: 1px #555 dashed; height:300px; width:250px; background-color:#aaa; align-items: stretch;/*以每一box為單位的內部對齊方式*/ align-content:space-around;/*以每一列為單位的對齊方式*/ }
order
個別元件的順序,只控制呈現出來的順序,不會改變他的邏輯順序 ( 按tab鍵切換的順序 )
初始值每一個元件都是0,可以為負值。
會依據值的大小排列。
order : 2;
順序對調的範例:
HTML:
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
CSS:
padding: 50px;
}
.box>div:nth-of-type(1) {
background:#f90;
}
.box>div:nth-of-type(2) {
background: #cc0;
}
.box>div:nth-of-type(3) {
background: #05c;
}
加上以下CSS 將對調1和2的順序
.box>div:nth-of-type(1){-webkit-order: 2;}
.box>div:nth-of-type(2){-webkit-order: 1;}
.box>div:nth-of-type(3){-webkit-order: 3;}
.box>div:nth-of-type(1){order: 2;}
.box>div:nth-of-type(2){order: 1;}
.box>div:nth-of-type(3){order: 3;}