先看看最終實現樣式

1個item寬度佔100%

2個item寬度各佔50%

三個item寬度各佔33.3%

四個item 就會換行 然後兩個佔50%

之後item再多 每個也只佔33.3%

最開始實現上述樣式，我採用的是el-col來包裹每個item 然後控制他們的span 達到換行與行顯示多少個的效果，但是後面發現，用flex佈局也能實現,再用css分別設定只有一個item 兩個item 4個item時的寬度

程式碼如下

&:last-child:first-child {
    //item 即是最後一個元素 又是第一個元素
    width: 100%;
  }

  &:nth-last-child(2):first-child ~ &:nth-last-child(1) 
 
{
    //item即是倒數第二個元素 又是第一個元素 之後的倒數第一個元素（也是第二個）
    width: 50%;
  }

  &:nth-last-child(2):first-child {
    //item即是倒數第二個元素 又是第一個元素 就是2個元素中第一個 設定它的寬度預設為50%
    width: 50%;
  }

  &:nth-last-child(4):first-child ~ &:nth-last-child(1) {
    //item即是倒數第二個元素 又是第一個元素 然後它之後的倒數第一個元素
    //就是4個元素中倒數第一個元素 設定它的寬度預設為50%
    width
 
: 50%;
  }

  &:nth-last-child(4):first-child ~ &:nth-last-child(2) {
    width: 50%;
  }

  &:nth-last-child(4):first-child ~ &:nth-last-child(3) {
    width: 50%;
  }

  &:nth-last-child(4):first-child {
    width: 50%;
  }

用偽類選擇器，判斷元素即是第一個，又是最後一個，說明之後一個元素，

即是倒數第四個，又是第一個 說明有4個元素，在用~符號 選取它之後的倒數第一個，元素 這樣來寫，