CSS flex

Flex 外容器屬性

• display:flex;

• flex-flow

  • flex-direction(文字方向)

    • column(上至下,左至右)
    • column-reverse(column相反)
    • row(左至右,上至下)
    • row-reverse (row相反)

  • flex-wrap(換行)

    • nowrap(單行)
    • wrap(換行)
    • wrap-reverse(換行,內容翻轉)

• justify-content(水平對其)

  • flex-end(對其最左邊)
  • flex-start(對其最右邊,預設)
  • center(置中)
  • space-between(移到兩旁)
  • space-around(間距平均)

• align-items(單個垂直對其)

  • flex-end(對其最下面)
  • flex-start(對其最上面)
  • center(置中)
  • stretch(內容撐開同flex-height)
  • baseline(對其基準線)

• align-content(多個垂直對其)

  • flex-end(對其最下面)
  • flex-start(對其最上面)
  • center(置中)
  • space-between(靠兩旁)
  • space-around(間距平均)
  • stretch(內容撐開同flex-height)

Flex 內元件屬性

• flex(1.2.3)

  • 1.flex-grow(伸展比例分配)
  • 2.flex-shrink(壓縮比例分配)
  • 3.flex-basis(元件基準值)

• align-self(單個垂直對其>align-items)

  • flex-end(對其最下面)
  • flex-start(對其最上面)
  • center(置中)
  • stretch(撐開同flex-height)
  • baseline(對其基準線)

• order(排序)

  • (1234…) (指定交換對象)