1. 程式人生 > >不怕你用不上!CSS 列表項佈局技巧

不怕你用不上!CSS 列表項佈局技巧

編者按:

為了不引入 HTML 標籤自身的樣式,本文未考慮 HTML 語義化的提倡,以使得行文與示例程式碼更加簡潔。這是文章寫作需要,而非程式碼風格示範。


在開發中我們經常會遇到關於如何展示列表的問題,例如:

  • 圖片選擇器列表

  • 人員部門選擇列表

  • 工作狀態列表

通用方法

為了讓其看起來更加舒適美觀,通常我們會在每個列表項上新增 margin-rightmargin-bottom 屬性來隔開它們,然後一行超過容器長度後進行換行

那麼在各種情況下,如何處理列表項中margin-right

margin-bottom,讓列表間隔和換行看起來更加自然美觀是本篇的重點

各種情況下的佈局

元素寬度已知,即知道每行最多多少個,且所有元素都在一個容器中

  1. 思路:item 在一個容器中,每第三個去掉 margin-right,最後三個取消 margin-bottom(如最後一行不滿 3 個也不影響)

  2. 關鍵程式碼

<div class='container'>
  <div class='item'>寬度已知,最多放三個</div>
  <div class='item'>寬度已知,最多放三個</div>
  <div
class='item'>
寬度已知,最多放三個</div> ... </div> <style> /* scss code */ .container { .item { margin-right: 30px; margin-bottom: 20px; &:nth-child(3n) { margin-right: 0; } &:nth-last-child(-n+3) { margin-bottom: 0; } } } </style> 複製程式碼
  1. 執行截圖

4. 完整程式碼:
元素寬度已知,所有元素都在一個容器

元素寬度已知 或 未知,且元素按照行數在相應容器中

  1. 思路:最後一個 container 去掉 margin-bottom,最後一個 item 去掉 magin-right

  2. 關鍵程式碼

<div class='container'>
  <div class='item'></div>
  <div class='item'></div>
</div>
<div class='container'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>
<div class='container'>
  <div class='item'></div>
</div>

<style>
/* scss code */
.container {
  margin-bottom: 20px;
  &:last-child { margin-bottom: 0; }

  .item {
    margin-right: 30px;
    &:last-child { margin-right: 0; }
  }
}
</style>
複製程式碼
  1. 執行截圖

  1. 完整程式碼:元素寬度已知或未知,且按照行數在相應容器

元素寬度未知,即不知道一行最多多少個,且所有元素都在一個容器中,常見於 flex 佈局

法1:Flex 佈局

  1. 思路:利用 flex 佈局的 justify-content 主軸屬性來控制元素的間距

  2. 缺點:flex 雖然強大,但是面對 長度不定的列表項佈局 還是不能很好滿足要求

  3. 關鍵程式碼

<div class='container'>
  <div class='item'>兩個可以成一行</div>
  <div class='item'>兩個可以成一行</div>
  <div class='item'>這三個字</div>
  <div class='item'>獨成一行呀獨成一行呀獨成一行呀獨成</div>
  <div class='item'>兩個才能成一行呀</div>
  <div class='item'>四個</div>
</div>

<style>
/* scss code */
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* 可以嘗試其他值,但效果仍不好 */

  .item {
    /* margin-right: 30px; 可以不用 m-r,由 flex 來控制左右間距 */
    margin-bottom: 20px;
  }
}
複製程式碼
  1. 執行截圖

  1. 完整程式碼:元素寬度已知或未知,且按照行數在相應容器

法2:負margin

  1. 接下來介紹 負margin 方法,可以很好的解決 長度不定的列表項佈局 問題

  2. 思路:用一個 wrapper 包在最外層,container 設定 負的 margin 來抵消 item 的 外邊距

參考連結:segmentfault.com/q/101000000…

  1. 關鍵程式碼
<div class="wrapper">
  <div class='container'>
    <div class='item'>兩個才能成一行呀</div>
    <div class='item'>兩個才能成一行呀</div>
    <div class='item'>這三個字</div>
    <div class='item'>獨成一行呀獨成一行呀獨成一行呀獨</div>
    <div class='item'>兩個才能成一行呀</div>
    <div class='item'>四個</div>
  </div>
</div>

<style>
/* scss code */
.wrapper {
  padding: 10px;
  border: 2px solid rgb(240, 103, 103);

  .container {
    display: flex;
    flex-wrap: wrap;
    margin-right: -30px;
    margin-bottom: -20px;

    .item {
      margin-right: 30px;
      margin-bottom: 20px;
    }
  }
}
</style>
複製程式碼
  1. 執行截圖

  1. 完整程式碼:法2:元素寬度未知,且所有元素都在一個容器

總結

多多利用 css3 屬性來幫助我們更好的佈局列表,避免使用 js 控制列表項,做到 css 與 js 解耦,更利於專案的維護

以上可能未包含所有情況,歡迎提出或者分享其他更好的解決辦法


文 / Lawler61

Learn and to learn.

Github:github.com/lawler61

作者部落格:www.freeze61.me

編 / 熒聲

本文由創宇前端作者授權釋出,版權屬於作者,創宇前端出品。歡迎註明出處轉載本文。文章連結:knownsec-fed.com/2018-12-13-…

想要訂閱更多來自知道創宇開發一線的分享,請搜尋關注我們的微信公眾號:創宇前端(KnownsecFED)。歡迎留言討論,我們會盡可能回覆。

感謝您的閱讀。