div display flex 如何出现横向滚动条

在使用 display: flex 布局时，如果希望内容超出容器宽度时出现横向滚动条，可以通过以下步骤实现：

1. ‌设置父容器为 Flex 容器‌

将父容器的 display 属性设置为 flex，并限制其宽度（例如，设置 width 或 max-width）。

2. ‌允许 Flex 容器横向滚动‌

通过 overflow-x: auto 或 overflow-x: scroll 启用横向滚动条。

3. ‌确保子元素总宽度超出父容器‌

子元素的宽度总和需要超过父容器的宽度，才能触发滚动条的出现。

示例代码

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

<style>
  .flex-container {
    display: flex;
    width: 300px; /* 限制父容器宽度 */
    overflow-x: auto; /* 启用横向滚动条 */
    white-space: nowrap; /* 防止子元素换行（可选） */
    border: 1px solid #ccc; /* 可选：添加边框以便观察 */
  }

  .flex-item {
    flex: 0 0 auto; /* 防止子元素伸缩或收缩 */
    width: 200px; /* 每个子元素的宽度 */
    height: 100px;
    margin-right: 10px; /* 可选：子元素之间的间距 */
    background-color: lightblue;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>

关键点说明

1. ‌父容器设置‌：

   • display: flex：启用 Flex 布局。
   • width: 300px：限制父容器的宽度，使其小于子元素的总宽度。
   • overflow-x: auto：当内容超出容器宽度时，自动显示横向滚动条。

2. ‌子元素设置‌：

   • flex: 0 0 auto：防止子元素伸缩或收缩，保持固定宽度,这个很重要，我就是没加这个，一直不出现滚动条，子元素即使我强制设置了宽度，也会被收缩。。
   • width: 200px：每个子元素的宽度，确保总宽度超出父容器。

3. ‌可选设置‌：

   • white-space: nowrap：防止子元素中的文本换行（如果子元素包含文本）。
   • margin-right：为子元素添加间距，使布局更美观。

   • 效果

     当子元素的总宽度超过父容器的宽度时，父容器会自动显示横向滚动条，用户可以通过滚动查看所有子元素。

     注意事项

     • 如果子元素的总宽度未超出父容器宽度，滚动条不会出现。
     • 可以使用 overflow-x: scroll 强制显示滚动条（即使内容未超出）。
     • 在移动端或响应式设计中，可能需要结合媒体查询调整布局。