Leon's Blogging

Coding blogging for hackers.

CSS Flex 屬性

| Comments

css 用來排版的新語法，以前都是用 float 來做排版，但相當麻煩，用了 flex 變的相當輕鬆好用

Flex 外容器屬性

display

必須宣告才能使用 flex

  • flex
  • inline-flex: 相當於 inline-block + flex
1
2
3

.container {
  display: flex;
}

flex-direction

排序方向

  • row: 水平 - Items are placed the same as the text direction.
  • row-reverse: 水平反轉 - Items are placed opposite to the text direction.
  • column: 垂直 - Items are placed top to bottom.
  • column-reverse: 垂直反轉 - Items are placed bottom to top
1
2
3
4

.container {
  display: flex;
  flex-direction: row;
}

flex-wrap

超出範圍時的處理方式

  • nowrap: 換行 (default)
  • wrap: 不換行
  • wrap-reverse: 換行時反轉
1
2
3
4

.container {
  display: flex;
  flex-wrap: nowrap;
}

flex-flow

flex-direction 與 flex-wrap 的縮寫

1
2
3
4

.container {
  display: flex;
  flex-flow: row nowrap;
}

justify-content

水平軸對齊設定

  • flex-start: Items align to the left side of the container.
  • flex-end: Items align to the right side of the container.
  • center: Items align at the center of the container.
  • space-between: Items display with equal spacing between them. 平均分配內容元素，左右元素將會與 main start 和 main end 貼齊
  • space-around: Items display with equal spacing around them. 平均分配內容元素，間距也是平均分配
1
2
3
4

.container {
  display: flex;
  justify-content: center;
}

align-items

交錯軸的對齊設定

  • flex-start: Items align to the top of the container.
  • flex-end: Items align to the bottom of the container.
  • center: Items align at the vertical center of the container.
  • baseline: Items display at the baseline of the container. 以所有內容元素的基線作為對齊標準
  • stretch: Items are stretched to fit the container. 將內容元素全部撐開至 Flexbox 的高度 (default)
1
2
3
4

.container {
  display: flex;
  align-items: center;
}

align-content

align-items 多行版本，和 justify-content 反過來

注意 stretch 在高度被限制的情況下不會正常伸展。

  • flex-start: Lines are packed at the top of the container.
  • flex-end: Lines are packed at the bottom of the container.
  • center: Lines are packed at the vertical center of the container.
  • space-between: Lines display with equal spacing between them. 將第一行與最後一行分別對齊最上方與最下方
  • space-around: Lines display with equal spacing around them. 每行平均分配間距
  • stretch: Lines are stretched to fit the container.內容元素全部撐開（default）
1
2
3
4

.container {
  display: flex;
  align-content: center;
}

Flex 內元件屬性

flex

包含了 flex-grow flex-shrink flex-basis

  • flex-grow: 數字，無單位，當子元素的 flex-basis 長度「小」於它自己在父元素分配到的長度，按照數字做相對應的「伸展」比例分配，預設值為 0，不會進行彈性變化，不可為負值，設為 1 則會進行彈性變化。
  • flex-shrink: 數字，無單位，當子元素的 flex-basis 長度「大」於它自己在父元素分配到的長度，按照數字做相對應的「壓縮」比例分配，預設值為 1，設為 0 的話不會進行彈性變化，不可為負值。
  • flex-basis: 子元素的基本大小，作為父元素的大小比較基準，預設值為 0，也因為預設值為 0，所以沒有設定此屬性的時候，會以直接採用 flex-grow 屬性，flex-basis 也可以設為 auto，如果設為 auto，就表示子元素以自己的基本大小為單位。
1
2
3

.container {
  flex: 1; // 當設定一個是 flex-grow
}

align-self

align-self 的作用在於覆寫已經套用 align-items 的屬性，可調整內元件交錯軸的對齊設定(主軸線則不能另外做設定)，且可以個別設定單一元件的值。

  • auto
  • flex-start
  • flex-end
  • center
  • baseline
  • stretch
1
2
3
4

.container {
  display: flex;
  align-self: center;
}

order

可重新定義元件的排列順序，順序會依據數值的大小排列。

1
2
3
4

.container {
  display: flex;
  order: -1;
}

playground

See the Pen rrYjvX by leonji (@leonji) on CodePen.

參考文件

Comments