開發日誌 - [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的處理上就更容易了!

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

也可以到 這裡 作練習唷!


2020-06-13

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

    內容大綱

  html: table

原本table設計用來就是呈現複雜資料的一種html tag,但在早期也常被用來作為網頁的排版,甚至現在精美的email樣式也都仍然是用table來排版。

然而因為其複雜的html程式結構,還有樣式設定的彈性較低,在重視SEO且行動裝置普及的現在,已經不再適合作為網頁排版的方式。

 

 以table排版的網頁經常看到這樣的複雜巢狀結構

 

  css: float

後來使用div標籤(即division,部分、區塊)已成為網頁排版的主流。只要在div上設定其CSS的float屬性就能根據內容大小靠左或靠右,並且讓接續的文字環繞在旁。

常見的文繞圖就是再接續文字區塊的<img>上設定  float: left  或  float: right  。

 

 在bootstrap 3 的grid system也是以float作為排版方式

另外要注意的是float效果在position: absolute的元素上是無效的。

立刻來玩玩  https://www.w3schools.com/cssref/pr_class_float.asp

 

 

  css: flex

雖然float在排板上已經相較於table容易許多了,但還是有很多問題無法解決,例如:對齊、垂直排列、clear等等。

而flex的出現簡直就是救星!flex要注意的是外容器與內元素分別要設定的屬性是不同的,

並且要先在外容器設定 display:flex 或 display:inline-flex ,才能繼續設定外容器與內元素的flex相關屬性。

在bootstrap 4 的grid system也改以flex的方式作為排列方式。

 

不過flex能玩的東西太多了,後續會再寫一篇flex專篇來介紹!

 文章在這裡!

 

  css: grid

真正為了排版而生的css屬性終於誕生了!

不僅可以調整排列方向、對齊方式,還能夠直接設定欄、列數,以及欄、列的間隔,不用再自己計算50%或33.33%了!

與flex類似有外容器及內元素的概念,須設定外容器為 display: grid 或 display:inline-grid 。

但新的東西總是會遇上支援度不足的問題,在IE瀏覽器就無法使用grid屬性。

 

與grid相關的屬性也會在後續寫一篇為大家作介紹!


相關資訊

其它資訊

專人服務

專人服務

LINE 立即聯繫