Ant Design

Grid

不知道為什麼很排斥這個東西，但是總是得面對。

雖然 Ant design 叫它 Grid，不過其實他是用 Flex box 下去做的。你可以不用它，但是一定要懂。有很多 Ant Design 的 Component 都是用 Flex Box 下去排的。不過其實也不用太大的學習成本拉，基本上就是 Bootstrap 那套再放下來用而已（但是我自己就沒用過幾次 Bootstrap...）

重點有兩個東西，還有他的屬性

• Row，基本上可以看成幫 container 加上 flex，還有加上 wrap

  • gutter，可以用單一個數值代表 column 之間的 gap，也可以用 array 代表 [column, row] 的 gap
    column 部份底層是加上 .row > div { margin: 0 n 0 n }，然後 .row { margin: 0 -n/2 0 -n/2}，
    row 部份底層是用 row-gap，這個屬性會直接加上 gap，然後寬度會平均扣。
  • justify
  • align

• Col：
  每個 Col 都會被加上 relative 的屬性

  • span 代表說要佔 24 個 col 中的幾個： 在底層是用 max-width 還有 flex-basis 實現的（其實是用 flex 這個屬性啦，不過同樣意思），實現的 class 是用 .ant-col-*
  • offset 向右邊推移幾格 底層是用 margin-left 來實現的，換句話說，本身的寬度會增加，所以會跟著推移下一個格子
  • push 向右邊推移幾格
  • pull 向左推移幾格
    pull 還有 push 都是使用 left / right 來實現的，配合 relative 就只是基於原本位置的偏移而已。
  • order 可以獨立於元素的排列指定順序，就是用 order 屬性實現
  • flex，等同於 flex 屬性，設定 grow, shrink, base