技術類文章

CSS Flex Box Chapter3.

,
material from: freeCodeCamp、CSS Tools: Reset CSS

Align Elements Using the justify-content Property

透過新增display:flex;這個屬性設定到元素上，該元素就會變成一個有彈性的容器(flex container)。

在前1章，我們可以進一步設定flex-direction，調整容器內部子元素的擺放方式，是要以列(row)或欄(column)作排列。

這一章，我們會用justify-content來幫我們排列 flex container 內的 items。排列前先講個概念就是 main axis 跟 cross axis 在 flex-direction 是 row 或是 column 時的差別，因為flex-content指定的是 items 在 main axis 上的排列方式。

差別如下圖所示 :

justify-content 的設定

(以flex-direction: row;為例)

  • 未設定前(default)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<style>
  #box-container {
    background: gray;
    display: flex;
    height: 500px;
    flex-direction: row;
  }
  #box-1 {
    background-color: dodgerblue;
    width: 25%;
    height: 100%;
  }

  #box-2 {
    background-color: orangered;
    width: 25%;
    height: 100%;
  }

  #box-3 {
    background-color: dodgerblue;
    width: 25%;
    height: 100%;
  }
</style>

<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
  <div id="box-3"></div>
</div>

  • center

在 main asis 上置中排列。

1
2
3
4
5
6
7
8
9
10
<style>
  #box-container {
    background: gray;
    display: flex;
    height: 500px;
    flex-direction: row;
    justify-content: center;
  }
  ...
</style>

  • flex-start

在 main axis 上靠左排列。

1
2
3
4
5
6
7
8
9
10
<style>
  #box-container {
    background: gray;
    display: flex;
    height: 500px;
    flex-direction: row;
    justify-content: flex-start;
  }
  ...
</style>

  • flex-end

在 main axis 上靠右排列。

1
2
3
4
5
6
7
8
9
10
<style>
  #box-container {
    background: gray;
    display: flex;
    height: 500px;
    flex-direction: row;
    justify-content: flex-end;
  }
  ...
</style>

  • space-between

頭尾 items 被排到兩端，之後與其他 items 均分空隙(間隔)。

1
2
3
4
5
6
7
8
9
10
<style>
  #box-container {
    background: gray;
    display: flex;
    height: 500px;
    flex-direction: row;
    justify-content: space-between;
  }
  ...
</style>

  • space-around

頭尾 items 不會被排到兩端，所有 items 均分空隙(間隔)。
兩兩 items 間的空隙會是左右空隙的2倍。

1
2
3
4
5
6
7
8
9
10
<style>
  #box-container {
    background: gray;
    display: flex;
    height: 500px;
    flex-direction: row;
    justify-content: space-around;
  }
  ...
</style>

  • space-evenly

頭尾 items 不會被排到兩端，所有 items 均分空隙(間隔)。
兩兩 items 間的空隙保持與左右空隙相同，真正的均分所有剩餘空間。

1
2
3
4
5
6
7
8
9
10
<style>
  #box-container {
    background: gray;
    display: flex;
    height: 500px;
    flex-direction: row;
    justify-content: space-evenly;
  }
  ...
</style>

Align Elements Using the align-items Property

緊接著，我們會用align-items來幫我們排列 flex container 內的 items。還記得前面提過的概念就是 main axis 跟 cross axis 在 flex-direction 是 row 或是 column 時的差別，因為align-items指定的是 items 在 cross axis 上的排列方式。

align-items 的設定

(以flex-direction: row;為例)

  • 未設定前(default)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<style>
  #box-container {
    background: gray;
    display: flex;
    height: 500px;
    flex-direction: row;
  }
  #box-1 {
    background-color: dodgerblue;
    width: 25%;
    height: 25%;
  }

  #box-2 {
    background-color: orangered;
    width: 25%;
    height: 25%;
  }

  #box-3 {
    background-color: dodgerblue;
    width: 25%;
    height: 25%;
  }
</style>

<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
  <div id="box-3"></div>
</div>

  • flex-start

在 cross axis 靠上排列。

1
2
3
4
5
6
7
8
9
10
<style>
  #box-container {
    background: gray;
    display: flex;
    height: 500px;
    flex-direction: row;
    align-items: flex-start;
  }
  ...
</style>

  • flex-end

在 cross axis 靠下排列。

1
2
3
4
5
6
7
8
9
10
<style>
  #box-container {
    background: gray;
    display: flex;
    height: 500px;
    flex-direction: row;
    align-items: flex-end;
  }
  ...
</style>

  • center

在 cross axis 置中排列。

1
2
3
4
5
6
7
8
9
10
<style>
  #box-container {
    background: gray;
    display: flex;
    height: 500px;
    flex-direction: row;
    align-items: center;
  }
  ...
</style>

  • stretch

延展 items 沿著 cross axis 填滿，下圖看不出效果QQ。

1
2
3
4
5
6
7
8
9
10
<style>
  #box-container {
    background: gray;
    display: flex;
    height: 500px;
    flex-direction: row;
    align-items: stretch;
  }
  ...
</style>

  • baseline

將 items 沿著 cross axis 像 text 的 baseline 排列一樣，下圖看不出效果QQ。

1
2
3
4
5
6
7
8
9
10
<style>
  #box-container {
    background: gray;
    display: flex;
    height: 500px;
    flex-direction: row;
    align-items: baseline;
  }
  ...
</style>

分享到