CSS布局：如何用Flexbox实现元素内容超出容器时的横向滚动？-css教程-PHP中文网

CSS布局：如何用Flexbox实现元素内容超出容器时的横向滚动？

花韻仙語

发布： 2025-03-02 22:04:10

原创

1172人浏览过

css布局技巧：优雅处理元素内容溢出

网页布局中，元素内容超出容器是常见问题。本文以图片宽度超过容器为例，讲解如何用CSS实现横向滚动显示完整内容。

CSS布局：如何用Flexbox实现元素内容超出容器时的横向滚动？

问题：图片宽度超过容器，如何显示完整内容？

解决方案：使用Flexbox布局轻松解决。关键在于overflow、display、flex-direction、flex-wrap和容器高度的设置。

立即学习“前端免费学习笔记（深入）”；

超会AI

AI驱动的爆款内容制造机

查看详情

核心代码：

.container {
  overflow-x: auto; /* 启用横向自动滚动 */
  display: flex;
  flex-direction: row; /* 水平方向排列子元素 */
  flex-wrap: nowrap; /* 不换行，确保横向滚动 */
  height: 100px; /* 容器高度，可根据实际情况调整 */
}

.item {
  height: 100px; /* 子元素高度，可根据实际情况调整 */
  margin-right: 10px; /* 添加间距，避免元素紧贴 */
}

登录后复制

代码解释：