前言

今天我們先過一過Flex的屬性的用法，再通過一個Flex的小遊戲，來深入學習Flex佈局。小遊戲連接（https://flexboxfroggy.com），在文章最後將附上參考答案。

Flex屬性

flex-direction

先說一下，在Flex佈局，會把頁面分為兩個方向，分別是主軸和交錯軸，主軸和交錯軸是通過flex-direction來決定的，flex-direction有row、column、column-reverse、row-reverse。

舉個例子，若設定了flex-direction: row，則主軸是行（水平）方向，交錯軸則是列（垂直）方向。

justify-content

這個justify-content屬性是設置上面所說的主軸的排序方向，選項有flex-start、flex-end、center、space-between、space-around。

具體它們有甚麼區別，來看看下圖。

align-items

align-items是justify-content是交錯軸版本，選項有flex-start、flex-end、baseline、center、stretch。

align-content

align-content是align-items是多行版本，選項有flex-start、flex-end、center、stretch、space-center、space-around。

內元件的屬性

在Flex中，分為外容器和內元件，外容器是在聲明display:flex的標籤，被外容器包含著的標籤則是內元件，上述所講的屬性都是用外容器上的。

而在內元件中則有以下幾個屬性可以設置，分別flex-grow、flex-shrink、flex-basis、align-self和order。

• flex-grow: 元件的伸展性，是一個數值，當空間分配還有剩餘時的當前元件的伸展性，預設值為 0，如果設置為 0 則不會縮放。
• flex-shrink: 元件的收縮性: 元件的伸展性，是一個數值，當空間分配還不足時的當前元件的收縮性，預設值為 0，如果設置為 0 則不會縮放。
• flex-basis: 元件的基準值，可使用不同的單位值。
• align-self: align-self 可以調整內元件交錯軸的對齊設定(主軸線則不能另外做設定)，且可以個別設定單一元件的值。
• order: 這是一個相當特別的屬性，可以重新定義元件的排列順序，順序會依據數值的大小排列。

Flexbox Froggy 答案

1) justify-content: flex-end;
2) justify-content: center;
3) justify-content: space-around;
4) justify-content: space-between;
5) align-items: flex-end;
6) align-items: center;
justify-content: center;
7) justify-content: space-around;
8) flex-direction: row-reverse;
9) flex-direction: column;
10) flex-direction: row-reverse;
justify-content: flex-end;
11) flex-direction: column;
justify-content: flex-end;
12) flex-direction: column-reverse;
justify-content: space-between;
13) flex-direction: row-reverse;
justify-content: center;
align-items: flex-end;
14) order: 1;
15) order: -3;
16) align-self: flex-end;
17) align-self: flex-end;
order: 1;
18) flex-wrap: wrap;
19) flex-direction: column;
flex-wrap: wrap;
20) flex-flow: column wrap;
21) align-content: flex-start;
22) align-content: flex-end;
23) flex-direction: column-reverse;
align-content: center;
24) flex-flow:column-reverse wrap-reverse;
justify-content:center;
align-content:space-between;

一. 小目標

實現長頁截屏的滑動效果。

二. 分析過程

首先，在鼠停留在圖片上的時候需要觸發動畫效果，這裡可以用偽類:hover來實現，把實現動畫效果的CSS代碼寫在:hover裡。

因為要通過CSS來控制圖片的顯示，所以這裡用background-image來加載圖片，再用background-postition來控制圖片的位置。

最後就用animation指定@keyframes，並設置持續時間即可。

三. 實現

1
2
3
4
5
6
7
8
9

/* html 略 */
.image{
   width: 400px;
    height: 500px;
    background-image: url(https://gw.alipayobjects.com/zos/rmsportal/GnDiHuTNxcXpSaJxhmRl.jpg);
    background-position-y: 0%;
    background-size: cover;
    background-repeat: no-repeat;
}

因為這段CSS是加在一個div上，而div本身沒有高度和寬度，所以需要加上高度和寬度。

注意一點，一般在使用background-size時要加background-repeat: no-repeat，否則如果圖片太小，會在容器不停的重複來填滿容器。有興趣的讀者可以試一下把width或height調大，然後刪掉background-repeat。

background-position-y是設置了圖片垂直方向上的開始位置，這裡0%就是由最上面開始顯示。backgroun-size: cover會把圖片盡可能的拉大以填充整個圖片，我們這個圖片是height大於width，所以會截斷了下面的一部份，截斷了的部份會通過動態去變化background-position-y慢慢顯示。

1
2
3
4
5
6
7
8
9
10
11

@keyframes scrollUpAndDown{
  0%{
    background-position-y: 0%;
  }
  50%{
    background-position-y: 100%;
  }
  100%{
    background-position-y: 0%;
  }
}

要使用animation就必須掌握@keyframes，基本可以這樣理解，@keyframes就是幀的一個變化過程，可以用百份比或者from to的方式來聲明變化的過程，在裡面再聲明要變化的屬性。上面的代碼就是說，前半段動畫先把background-position-y由0%遞增至100%，後半段再將其遞減至0%。

1
2
3
4
5

.image:hover{
  animation: scrollUpAndDown 8s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

最後便是如何觸發動畫的問題，這裡我們用:hover，當鼠標停留在圖片上的時候觸發。animation的第一個參數是@keyframes的名字，第二個參數是動畫持續的時間，可用s或ms作單位。animation-timing-function是指定動畫的速度函數，ease-in-out是以低速開始和結束。其它選項有linear、ease、ease-in、ease-out、cubic-bezier(x,x,x,x)等等，感興趣的讀者可以自行換個選項試試不的效果。

至此我們的這個簡單的動畫就已經完成了。

完整的代碼在這裡，大家加油！