使用 Flexbox 实现横向滚动

通过 Flexbox 和 overflow-x: auto，你可以轻松地实现横向滚动布局，尤其适用于图片画廊、水平导航栏或卡片展示等场景。

<div class="scroll-container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
</div>

<style>
  .scroll-container {
    display: flex;
    overflow-x: auto;  /* 允许横向滚动 */
    gap: 10px;         /* 项目之间的间距 */
    padding: 10px;
  }

  .item {
    flex-shrink: 0;    /* 防止项缩小 */
    width: 200px;      /* 每个项的固定宽度 */
    height: 100px;
    background-color: #4CAF50;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
  }
</style>

`

Item 1

Item 2

Item 3

Item 4

Item 5

`