[CSS] 網頁設計教學超入門:網頁排版的方式-flexbox篇

2021-11-24
    內容大綱

父容器屬性:決定子元素排列方式

第一步要建立的是display屬性為flex或inline-flex(效果同inline-block,本身有inline特性)的父容器。

賦有flex屬性的容器,子元素的寬度都會被壓縮成內容的寬度,高度則會延展父容器的空間(這是因為預設align-items屬性為stretch)。

.flex-container {
    display: flex;
    border: 1px solid #ddd;
    padding: 10px;
    height: 120px
}
.flex-container p{
    margin:5px;
}

.flex-container

p1

p2

p3

p4

 

flex-direction

決定子元素的排列方向。預設為row(橫向左->右),另外分別有row-reverse(橫向右->左)、column(縱向上->下)、column-reverse(縱向下->上)。

flex-direction:row

1

2

3

flex-direction:row-reverse

1

2

3

flex-direction:column

1

2

3

flex-direction:column-reverse

1

2

3

 

flex-wrap

決定子元素是否換行,預設為nowrap(不換行)。

flex-wrap:nowrap

1

2

3

4

flex-wrap:wrap

1

2

3

4

5

6

flex-flow

flex-direction與flex-wrap的簡式。

flex-flow: {flex-direction} {flex-wrap}

 

justify-content

決定子元素平行於主軸(flex-direction)的對齊方式(預設為水平對齊方式,反之如果flex-direction是column,則是決定子元素的垂直對齊方式),預設為flex-start。

 

justify-content: flex-start /* 對齊容器方向的起點 */

1

2

3

justify-content: center /* 置中 */

1

2

3

justify-content: flex-end /* 對齊容器方向的終點 */

1

2

3

justify-content: space-between /* 均分空間至元素間 */

1

2

3

justify-content: space-around /* 均分空間至頭、尾、元素間 */

1

2

 

align-items

決定子元素垂直於主軸(flex-direction)的對齊方式,預設為stretch。

 

align-items: flex-start /* 對齊容器方向的起點 */

1

2

3

align-items: center /* 置中 */

1

2

3

align-items: flex-end /* 對齊容器方向的終點 */

1

2

3

align-items: stretch /* 延展至容器 */

1

2

3

align-items: baseline /* 對齊子元素基準線 */

1

2

3

 

align-content

當子元素有多行的時候(flex-wrap屬性必須為wrap),決定子元素垂直於主軸(flex-direction)的對齊方式,預設為stretch。

基本與align-items一樣,而多行的時候因為有行與行之間的距離,所以多了 space-around 與 space-between 兩種方式。

 

align-content: space-between /* 對齊容器方向的起點 */

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

align-content: space-around /* 置中 */

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

 

子元素屬性:決定自身(子元素)排列方式與樣式

order

決定自身在容器中的排列順序,預設皆為0,所以會根據網頁DOM順序排列下去,數值越大則排序越後面。

1 (order:3)

2 (default)

3 (order:2)

4 (default)

 

flex-grow

決定自身長度延展的倍數,會根據同一個容器中的子元素之flex-grow值作計算,預設為0。延展的空間為容器剩餘的所有空間。

1 (flex-grow:1)

2 (default)

3 (default)

4 (default)

因為預設為0,所以若容器中只有一個子元素設定大於 0 的 flex-grow 值,就會佔滿剩餘空間。 

 

1 (flex-grow:1)

2 (default)

3 (flex-grow:2)

4 (default)

由子元素1和子元素3來佔滿容器,分別比例為1:2。 

 

flex-shrink

與 flex-grow 相反,flex-shrink是當元素佔滿容器的時候,決定自身長度收縮的程度,數值越高,收縮比例越大,預設為1。(這個屬性要在父元素flex-wrap為nowrap的情況下才有效果)

1 (flex-shrink:0)

2 (default)

3 (flex-shrink:2)

4 (default)

5 (default)

6 (default)

7 (default)

(default)

(以上子元素預設寬度為150px,當flex-shrink值為0時才會維持原本寬度)

 

flex-basis

設定自身的起始長度,可能會因父容器nowrap與自身shrink值而改變長度。

1 (flex-basis:250px)

2 (default)

3 (default)

4 (default)

 

flex

flex-grow, flex-shrink 與 flex-basis 的簡式。

flex: {flex-grow} {flex-shrink} {flex-basis}

 

align-self

決定自身垂直於主軸(flex-direction)的對齊方式,會覆寫父元素 align-items 的值。

1

2 (align-self: flex-end)

4 (align-self: flex-start)

4 (align-self: center)

 

---------------------

了解flexbox的各項屬性後,在網頁Layout的處理上就更容易了!

大家可以多多嘗試,就會發現它的好用之處。

也可以到 這裡 作練習唷!


相關資訊

其它資訊