css3彈性盒子常用樣式屬性梳理匯總

direction

修改元素排列方式，可單獨使用，會影響子元素內部元素排列

• rtl
  1

  2

  1 2

flex-direction

彈性子元素在父容器中的位置

• row-reverse
  1

  2

  3
• column-reverse
  1

  2

  3

justify-content

彈性子元素（橫向）排列方式，可單獨使用，會影響子元素內部元素排列

• flex-start
  1

  2

  3
• flex-end
  1

  2

  3
• center
  1

  2

  3
• space-between
  1

  2

  3
• space-around
  1

  2

  3
• space-evenly
  1

  2

  3

align-items

設置或檢索彈性盒子元素在側軸（縱軸）方向上的對齊方式

• flex-start
  1

  2

  3
• flex-end
  1

  2

  3
• center
  1

  2

  3

flex-wrap

指定彈性盒子的子元素換行方式

• wrap
  1

  2

  3

  4

  5

  6

  7
• wrap-reverse
  1

  2

  3

  4

  5

  6

  7

align-content

配合 flex-wrap 使用,設置各個行的對齊

• flex-start
  1

  2

  3

  4

  5

  6

  7
• flex-end
  1

  2

  3

  4

  5

  6

  7
• center
  1

  2

  3

  4

  5

  6

  7
• space-between
  1

  2

  3

  4

  5

  6

  7
• space-around
  1

  2

  3

  4

  5

  6

  7
• space-evenly
  1

  2

  3

  4

  5

  6

  7

彈性子元素屬性

order

設置彈性容器內彈性子元素的排序

• order:-1
  1

  2

  order:-1

margin

設置彈性容器內彈性子元素的對齊方式

• margin-left: auto
  1

  2

  剩余空間居左
• margin-right: auto
  1

  2

  剩余空間居右
• margin: auto
  完美居中
• margin: auto
  完美居中

  完美居中

align-self

設置彈性元素自身在側軸（縱軸）方向上的對齊方式

• order:-1
  flex-start

  flex-end

  center

  stretch

flex

指定彈性子元素如何分配空間

• order:-1
  flex-start

  flex-end

  center

  stretch