我的 flexbox 项目溢出容器......如何防止这种情况？答案

【问题标题】：My flexbox items are overflowing the container... how to prevent this?我的 flexbox 项目溢出容器......如何防止这种情况？
【发布时间】：2020-08-30 02:41:48
【问题描述】：

您好，我正在尝试制作 1 个容器，其中包含一堆卡片或列表。卡片在右侧溢出，而不是在第一行下方换成新行。

请帮帮忙，我是一个新开发者，但仍然对 flexbox 感到困惑....如果您有任何好的资源来掌握基础知识，也请分享！


.all-listings {
  display: flex;
  align-items: stretch;
  width: 100%;
  flex-basis: 0;
}

.listing-preview {
  margin: 10px;
  padding: 15px;
  width: 300px;
  height: 400px;
  background-color: white;
  border-radius: 5px;
  -webkit-box-shadow: 5px 5px 14px 1px rgba(135, 132, 135, 1);
  -moz-box-shadow: 5px 5px 14px 1px rgba(135, 132, 135, 1);
  box-shadow: 5px 5px 14px 1px rgba(135, 132, 135, 1);
}

【问题讨论】：

stackoverflow.com/a/63652562/3597276

标签： html css flexbox

【解决方案1】：

将flex-wrap: wrap 添加到.all-listings。

至于资源，我建议查看 Traversy Media 在 YT 上的频道。

【讨论】：

谢谢！！太疯狂了，我花了 30 分钟试图自己解决这个问题。自从我第一次开始构建项目以来，我觉得自己在进步，但正是这样的事情让我意识到我必须走多远。