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>
1
2
3
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; ⤵

1
2
3

justify-content:flex-end; ⤵

1
2
3

 

justify-content:center; ⤵

1
2
3

 

justify-content:space-between; ⤵

1
2
3

 

justify-content:space-around; ⤵

1
2
3

 

justify-content:space-evenly; ⤵

1
2
3

 

• flex-direction

主軸的方向

接下來我們再增加 flex-direction 這個屬性,這個屬性有以下的值:

  • row (水平由左至右)
  • row-reverse (水平由右至左)
  • column (垂直由上到下)
  • column-reverse (垂直由下到上)

 

.boxies {
display: flex; /*宣告為彈性佈局元素*/
flex-direction:row; /*水平由左排列(自動垂直方向撐滿)*/
}
1
2
3

 

flex-direction: row-reverse;/*水平由右排列(自動垂直方向撐滿)*/
1
2
3

 

flex-direction: column;/*垂直由上排列(自動水平方向撐滿)*/
1
2
3

*如果要把文字改成直書,要用 writing-mode 語法,而不是用上面這個。

flex-direction: column-reverse;/*垂直由下排列(自動水平方向撐滿)*/
1
2
3

 

• flex-wrap

flex-wrap 換行屬性有以下值:

  • nowrap (不換行)
  • wrap (超出範圍時自動換行,下一行出現在下方)
  • wrap-reverse(超出範圍時自動換行,下一行出現在上方)
flex-wrap: nowrap;
1
2
3

 

flex-wrap: wrap;
1
2
3

▼不只自動換行,還反轉順序

flex-wrap: wrap-reverse;
1
2
3

 

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

 

display:flex;
flex-direction: column;
align-items: flex-end;
1111
2222222222222
33333333
4

 

display:flex;
flex-direction: column;
align-items: center;
1111
2222222222222
33333333
4

 

display:flex;
flex-direction: column;
align-items: baseline;
1111
2222222222222
33333333
4

 

display:flex;
flex-direction: column;
align-items: stretch;
1111
2222222222222
33333333
4

*如果有定義某一邊的 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>
&nbsp;
<div>2</div>
&nbsp;
<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;}

 

 

>>>玩遊戲囉