flexbox:最小间距

Question

鉴于此scss/css:

div.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  border: 1px solid blue;
}
div.container div {
  width: 200px;
  border: 1px solid gray;
  display: inline-block;
  text-align: center;
}

此布局使每行中的第一个项目与左侧对齐,最后一个项目根据需要与右侧对齐.这是一个代码说明.

随着浏览器窗口变窄,分布式div元素将一起移动直到它们接触,此时它们被重新排列在另一行上.同样,每行的第一个div左对齐,最后一个对齐,右边有空格.

有没有办法设置最小间距,以便内部div元素之间始终有间隙.

对齐时,填充和边距可能不起作用

<-- 1st left in row并且last right in row -->不会举行.

Answer 1

2022 年你可以只使用gapCSS 属性：

div.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  border: 1px solid blue;
  gap: 20px;
}

为了支持旧版浏览器，您可以使用margin hack。

div.container > * {
  margin: 12px 0 0 12px;
}

div.container {
  display: inline-flex;
  flex-wrap: wrap;
  margin: -12px 0 0 -12px;
  width: calc(100% + 12px);
}

Answer 2

派对迟到了,但我遇到了同样的问题.我解决它的方式可能不适合所有人,但在这里它适用于那些可以使用它的人.

基本的想法是你有一个最小的差距x.您可以设置每个项目的左右边距,x/2以便项目之间的距离为x(边距+边距).然后将所有项目包装在一个左右边距的容器中-x/2.这将隐藏每行边缘项目的边距.

这是一个工作示例:

.box {
  border: 1px solid black;
  overflow-x: hidden;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 -1em;
}

.item {
  display: flex;
  border: 1px solid grey;
  padding: 1em;
  width: 20%;
  margin: 0 1em;
}

<div class="box">
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
</div>

该overflow-x: hidden;上.box是为了防止水平滚动条,在由于保证金四溢的一些浏览器中显示出来.

如果您希望间隙始终保持一致,并且对于只有一个项目的行,该项目将跨越整行,则可以添加flex-grow: 1到.item.

Answer 3

您可以添加另一个具有flex样式的div,用于保持内部div之间所需的间隙.对于该间隙的最小宽度,请使用此属性(如W3Schools.com中所述):

flex:flex-grow flex-shrink flex-basis | auto | initial | inherit;

flex-shrink是:

flex-shrink:一个数字,指定项目相对于其他灵活项目收缩的程度

所以,例如你为gap div设置这个css代码:

flex: 1 0 10px;

告诉gap div将有10px的宽度,并将相对于其他灵活项目增长,但不会收缩.所以最小宽度在屏幕的最窄宽度处为10px.

Answer 4

flexbox-gap自 2021 年 4 月起，所有主要浏览器均已支持（IE 已被视为已失效）。将它与space-between解决您的问题相结合。

div.container {
  display: flex;
  gap: 10px; /* minimum gap between flex-items */
  justify-content: space-between;
}