Css 弹性响应最大宽度，间距为

我正在添加3列，它们的最大宽度为400px，并使用

space-between

在它们之间添加空格

.wrap {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
  justify-content: space-between;
}

.item {
  width: 100%;
  max-width: 400px;
}

当我缩小屏幕尺寸时，项目没有响应。它们只是彼此倒下。如果我删除

flex wrap

我开始得到每行超过3列，并且它们低于400px

我如何在flex中获得3个有空格的响应列

---

无法使用宽度的百分比，因为项目之间的空间在任何屏幕大小下都必须看起来相同。

如果需要三列，请在

.item

声明中将width属性更改为

33%

，而不是

100%

---

目前，您的所有“列”都在争取成为父节点的100%。这里有一个来自css tricks.com的好消息。

如果您想要三列，请在

.item

声明中将width属性更改为

33%

，而不是

100%

---

目前，您的所有“列”都在争取成为父节点的100%。这里有一个来自css tricks.com的很好的例子。

如果你不想让它们占据父对象的整个宽度，你应该删除

宽度：100%

。由于您在父级上使用flex，您也可以在子级上使用flex属性，并具有以下特性：

.item {
  flex-basis: 33%;   /* <-- Added in lieu of the width */
  max-width: 400px;
  margin: 0px 5px;   /* <-- Added to give left/right margins */
}

.item{
flex basis:33%；/*如果您不想让它们占据父对象的整个宽度，则应删除
宽度：100%
。由于您在父对象上使用flex，您还可以在子对象上使用flex属性，并具有以下特性：

.item {
  flex-basis: 33%;   /* <-- Added in lieu of the width */
  max-width: 400px;
  margin: 0px 5px;   /* <-- Added to give left/right margins */
}

.item{
弹性基础：33%；/*
它们只是在彼此下方折叠。
-->你期望什么？
它们只是在彼此下方折叠。
-->你期望什么？
.item {
  flex: 1;           /* <-- Lets them grow/shrink equally */
  max-width: 400px;  
  margin: 0px 5px;   /* <-- Added to give left/right margins */
}