Question

我要添加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列，并且它们低于400像素。

如何在flex中获得3个响应式列，并在它们之间留有间隔？

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

Answer 1

如果您不希望它们占据父级的整个宽度，则应放下width: 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-grow: 1;      /* <-- Lets them grow equally */
  flex-shrink: 1;    /* <-- Lets them shrink equally. OPTIONAL as 1 is the default */
  max-width: 400px;  
  margin: 0px 5px;   /* <-- Added to give left/right margins */
}

最后一个的简写是：

.item {
  flex: 1;           /* <-- Lets them grow/shrink equally */
  max-width: 400px;  
  margin: 0px 5px;   /* <-- Added to give left/right margins */
}

此外，如果父级中只有这3个子级，则如果您不希望包装子级元素，则可能要从flex-wrap: wrap;中删除.wrapper。在这种情况下不会发生这种情况，因为子级的宽度百分比之和为100％。但这可能会造成混淆，并且与您的意图相矛盾。

Answer 2

如果需要三列，请在33%声明中将width属性更改为.item，而不是100%。

JSFiddle example

当前，您所有的“列”都在争取成为父节点的100％。这是css-tricks.com上的explanation of using css flex。

灵活的响应式最大宽度，中间有空格

2 个答案: