css - 你能不能让 flexbox 元素不换行，直到它达到容器的宽度？

Question

场景:我想要一个 flex item 的 flex-basis 为 500px。我希望它能够根据需要扩展，没有包装，但只能扩展到达到容器的宽度。在这一点上，我希望它包装。容器的宽度应被视为响应式且不可预测。

半例子: https://codepen.io/anon/pen/EExyLL

.container {
  margin: 5px;
  padding: 5px;
  background-color: #f1f1f1;

  .flex {
    display: flex;
    justify-content: center;
    margin: 16px auto;
    background: #c4f9ff;

    .item {
      flex-basis: 500px;
      max-width: 100%;
      background-color: #ffdbef;
    }
  }
}

我也愿意接受不基于 flexbox 的解决方案。

Answer 1

你只需要更新元素

.item {
    min-width: 400px;
    background-color: #ffdbef;
}

它们将从 400 开始并扩展到容器宽度并换行。如果您希望它在较小的屏幕上表现不同，请使用媒体查询来执行您需要的操作，这就是响应式设计的工作原理。

我用了 400 因为在你的笔里是 400

更新的笔

https://codepen.io/anon/pen/MVWJqE