CSS 語法 16：彈性排版 flex

彈性排版 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
3-1
3-2

這個例子除了三個盒子彼此分開，用掉所有水平空間，並保持兩兩之間距離相同，以及高度相同（因為第三個盒子的內容有換行，所以另外兩個盒子跟著增高）

上面除了用 display: flex 宣告 boxies 為彈性元素(彈性容器)以外，也用到了 justify-content (內容佈局)這個屬性，說明如下。
＊Ｑ：彈性容器是什麼？Ａ：以上面的例子來說，灰色框的元素就是「彈性容器」，用來裝裡面三個有顏色的盒子，這三個盒子稱為「彈性項目」。

• 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
one

two
two

three
three
three

four

display:flex;
flex-direction: row;
align-items: flex-end;

one
one
one

two
two

three
three
three

four

display:flex;
flex-direction: row;
align-items: center;

one
one
one

two
two

three
three
three

four

display:flex;
flex-direction: row;
align-items: baseline;/*對齊第一排文字的基準線*/

one
one
one

two
two

three
three
three

four

display:flex;
flex-direction: row;
align-items: stretch;

one
one
one

two
two

three
three
three

four

垂直排列的時候如下

display:flex;
flex-direction: column;
align-items: flex-start;

1111

2222222222222

33333333

display:flex;
flex-direction: column;
align-items: flex-end;

1111

2222222222222

33333333

display:flex;
flex-direction: column;
align-items: center;

1111

2222222222222

33333333

display:flex;
flex-direction: column;
align-items: baseline;

1111

2222222222222

33333333

display:flex;
flex-direction: column;
align-items: stretch;

1111

2222222222222

33333333

*如果有定義某一邊的 margin 則會影響排列的狀況
以下第2個元素以定義左邊的邊緣，第四個元素有定義右邊的邊緣

display:flex;
flex-direction: column;
align-items: stretch;

1111111

left-margin:20px

33333333

margin-right: 30px;

align-self

align-self 可以用來覆寫由 align-items 繼承下來的對齊屬性，比如說有一組 boxes 都繼承了 align-items 的對齊上緣屬性，但其中一個希望另外宣告，就可以套用 align-self 屬性來個別宣告。

▼”two” 這一個 box 自己套用 align-self:flex-end;

one
one
one

two
two

three
three
three

four

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;}

>>>玩遊戲囉

Daco Note

CSS 語法 16：彈性排版 flex

彈性排版 flex

• justify-content

• flex-direction

• flex-wrap

• flex-flow

• align-items

align-self

align-content

order