时间戳

首页 > 解决方案 > Flex 响应式最大宽度，中间有空格

css - Flex 响应式最大宽度，中间有空格

问题描述

我正在添加 3 个最大宽度为 400 像素的列，并使用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 个带有空格的响应列？

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

标签： cssflexbox

解决方案

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 */
}

如果您的父母中只有这 3 个孩子，那么您也可以这样做：

.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%。但这可能会令人困惑，并且与您的意图相矛盾。

推荐阅读