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

編者按：

爲了避免引入 HTML 標籤自身的樣式，本文未考慮 HTML 語義化的提倡，以使得行文與示例代碼更加簡潔。這是文章寫做須要，而非代碼風格示範。

---

在開發中咱們常常會遇到關於如何展現列表的問題，例如：

• 圖片選擇器列表

• 人員部門選擇列表

• 工做狀態列表

通用方法

爲了讓其看起來更加溫馨美觀，一般咱們會在每一個列表項上添加 margin-right 和 margin-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>
複製代碼

3. 運行截圖

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>
複製代碼

3. 運行截圖

4. 完整代碼：元素寬度已知或未知，且按照行數在相應容器

元素寬度未知，即不知道一行最多多少個，且全部元素都在一個容器中，常見於 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; } } 複製代碼

4. 運行截圖

5. 完整代碼：元素寬度已知或未知，且按照行數在相應容器

法2：負margin

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

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

參考連接：segmentfault.com/q/101000000…

3. 關鍵代碼

<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>
複製代碼

4. 運行截圖

5. 完整代碼：法2：元素寬度未知，且全部元素都在一個容器

總結

多多利用 css3 屬性來幫助咱們更好的佈局列表，避免使用 js 控制列表項，作到 css 與 js 解耦，更利於項目的維護

以上可能未包含全部狀況，歡迎提出或者分享其餘更好的解決辦法

---

文 / Lawler61

Learn and to learn.

Github：github.com/lawler61

做者博客：www.freeze61.me

編 / 熒聲

本文由創宇前端做者受權發佈，版權屬於做者，創宇前端出品。歡迎註明出處轉載本文。文章連接：knownsec-fed.com/2018-12-13-…

想要訂閱更多來自知道創宇開發一線的分享，請搜索關注咱們的微信公衆號：創宇前端（KnownsecFED）。歡迎留言討論，咱們會盡量回復。

感謝您的閱讀。