在前端開發中，滑動刪除功能已經成為了一種很常見的交互方式。本文介紹如何使用CSS編寫滑動刪除功能。

/* CSS代碼 */
.swipe {
position: relative;
overflow: hidden;
}
.swipe-actions {
position: absolute;
top: 0;
right: 0;
height: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
}
.swipe-action {
width: 60px;
height: 100%;
line-height: 50px;
text-align: center;
background-color: red;
color: #fff;
font-size: 14px;
transition: transform .3s;
}
.swipe-action.delete {
background-color: #f44336;
}
.swipe-content {
position: relative;
}
.swipe-content-inner {
padding-right: 60px;
transition: transform .3s;
}
.swipe-content.active .swipe-content-inner {
transform: translateX(-60px);
}
.swipe-actions.active .swipe-action {
transform: translateX(60px);
}

上面的代碼使用了Flex布局，將滑動刪除按鈕的父元素.swipe-actions設為絕對定位，并使其頂部和右側距離為0，這樣就能把所有滑動刪除按鈕放置在內容區域的右側。

每個滑動刪除按鈕.swipe-action的寬度為60px，它們的父元素.swipe-actions使用了display:flex和justify-content:flex-end來做到讓所有按鈕依次緊挨在一起。

當.swipe-actions和.swipe-content-inner同時向左滑動60px時，就能使按鈕出現，所以我們需要給.active這個類賦值transform:translateX(-60px)

當用戶向右滑動時，按鈕需要滑回去。我們只需要刪除.active類即可。

最后，在JavaScript中監聽手勢事件，在用戶左右滑動時，修改元素的類名，就能實現滑動刪除功能了。