摘要：記錄一下最近學(xué)到的一些的小技巧。我這里使用了布局，要它第一行居中顯示，第二行如果有的話，要右對(duì)齊，可以對(duì)最后一個(gè)元素使用。直接貼代碼默認(rèn)居中大于四個(gè)元素，因?yàn)樽詈笠粋€(gè)元素是第五個(gè)或者第五個(gè)元素之后的元素學(xué)習(xí)鏈接

記錄一下最近學(xué)到的一些css的小技巧。

媒體查詢這里存在一個(gè)邊界值的問題，如果max-width和下一個(gè)min-width數(shù)值相等，那么就需要在min-width里面寫樣式覆蓋掉max-width里面的，不然就會(huì)出現(xiàn)邊界值的樣式不是我們想要的那樣子。如

@media (max-width: 768px) {
    padding: 10px;
}
@media (min-width: 768px) and (max-width: 1280px) {
    padding: 0;// 如果這里不寫，在768px就會(huì)默認(rèn)是10px的padding
}

所以，有一種做法就是讓max-width和min-width相差1，但是經(jīng)過測(cè)試，發(fā)現(xiàn)在電腦分辨率為"125%"下，會(huì)出現(xiàn)767px沒有辦法取到媒體查詢的樣式，具體原因我也不明白。

@media (max-width: 767px) {
    padding: 10px;
}
@media (min-width: 768px) and (max-width: 1280px) {
    padding: 0;
}

參考了boostrap媒體出現(xiàn)的寫法，用0.02間隔開，完美解決

  @media (max-width: 767.98px) {
  }

  @media (min-width: 768px) and (max-width: 1280px)  {
  }

有這樣一個(gè)需求，要渲染一個(gè)列表，一行顯示四個(gè)元素，如果小于四個(gè)，居中顯示，如果大于四個(gè)，要右對(duì)齊顯示。類似于這樣子。

這里的難點(diǎn)就是需要通過css來判斷有多少個(gè)元素，然后我使用了css選擇器。

li:first-child:nth-last-child(3）// 總共只有三個(gè)元素，因?yàn)榈谝粋€(gè)元素就是倒數(shù)第三個(gè)元素

li:first-child:nth-last-child(n+3）//大于或等于三個(gè)元素，因?yàn)榈谝粋€(gè)元素在倒數(shù)第三個(gè)以及倒數(shù)第三個(gè)之后

如果要操作樣式，可以這樣寫

li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3）~ li {
}

再回到我的問題。我這里使用了flex布局，要它第一行居中顯示，第二行如果有的話，要右對(duì)齊，可以對(duì)最后一個(gè)元素使用margin-right: auto。但是必須是大于四個(gè)的最后一個(gè)元素，如果只有一行就不需要右對(duì)齊啦。
直接貼代碼

    


    

        
A
        
B
        
C
        
A
        
B
        
C
    

學(xué)習(xí)鏈接：https://css-tricks.com/solved...