內容大綱
父容器屬性:決定子元素排列方式
第一步要建立的是display屬性為flex或inline-flex(效果同inline-block,本身有inline特性)的父容器。
賦有flex屬性的容器,子元素的寬度都會被壓縮成內容的寬度,高度則會延展父容器的空間(這是因為預設align-items屬性為stretch)。
.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
3
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)
8 (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的處理上就更容易了!
大家可以多多嘗試,就會發現它的好用之處。
也可以到 這裡 作練習唷!
[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相關的屬性也會在後續寫一篇為大家作介紹!