如何通过水平居中对齐和包装项目来控制 Flex 中的垂直和水平间距？

Question

包装项目水平放置并居中对齐。 你将如何控制垂直和水平间距？

在这个例子中，我们希望项目之间有 16px 的水平空间和 8px 的垂直空间。

这是一个可能的解决方案：

 /* Solution */ .flex-wrapper { padding-top: 1px; } .flex-wrapper:before { content: ""; display: block; margin-top: -9px; } .flex { display: flex; flex-wrap: wrap; margin-left: -16px; justify-content: center; } .flex-item { padding-left: 16px; padding-top: 8px; } /* For demo purposes, not related to solution. */ body { margin: 50px; } .container { width: 600px; outline: 1px solid black; } button { width: 100px; height: 40px; background: none; border: 4px solid red; font-size: 16px; }

 <div class="container"> <div class="flex-wrapper"> <div class="flex"> <div class="flex-item"> <button>1</button> </div> <div class="flex-item"> <button>2</button> </div> <div class="flex-item"> <button>3</button> </div> <div class="flex-item"> <button>4</button> </div> <div class="flex-item"> <button>5</button> </div> <div class="flex-item"> <button>6</button> </div> <div class="flex-item"> <button>7</button> </div> <div class="flex-item"> <button>8</button> </div> <div class="flex-item"> <button>9</button> </div> </div> </div> </div>

这个解决方案感觉有点.flex-wrapper ，尤其是.flex-wrapper部分。

有没有更好的办法？

---

笔记：

• 项目可以有不同的宽度。
• 我正在寻找一种无论物品是否包装都有效的解决方案。 项目也可以跨越多行，而不仅仅是像本例中的 2 行。
• 在撰写此问题时，浏览器对Flex gap没有很好的支持。

---

这个问题展示了如何水平居中对齐项目，但它没有演示如何控制项目之间的垂直和水平空间。

Answer 1

欢迎来到 CSS-Grid 的美妙世界，它非常适合于此。 如下所示，代码更少，更容易理解。

对列和行之间的空间的控制是通过 grid-column-gap 来完成的——你猜对了——列之间的间隙和 grid-row-gap 用于行之间的间隙。

您可以更轻松地编写此代码，例如对列使用重复函数：

grid-template-columns: repeat(5, 100px);

相当了不起。

明确地研究一下你可以用 CSS-Grid 做什么，而忘记 Flexbox。 这就是未来。 为了让你开始检查： https : //www.w3schools.com/css/css_grid.asp

 .container { display: grid; width: 564px; grid-template-columns: auto auto auto auto auto; grid-column-gap: 16px; grid-row-gap: 8px; outline: 1px solid black; } button { width: 100px; height: 40px; background: none; border: 4px solid red; font-size: 16px; }

 <div class='container'> <button>1</button> <button>2</button> <button>3</button> <button>4</button> <button>5</button> <button>6</button> <button>7</button> <button>8</button> </div>

顺便说一句，浏览器对 CSS-Grid 的支持非常可靠。

Answer 2

以@rx2347 的基于 CSS 网格的答案作为基线开始，但越来越接近您实际正在寻找的布局...如果您想要放置合理数量的固定项目，您可以手动将元素的位置设置为您希望通过使用repeat()创建更精细的网格，然后将元素放置在具有更细粒度的特定列中。

可能还有其他方法可以使用 CSS-grid 在每行偏移/缩进的基础上实现这一点。 为了使其真正自动化，例如处理大量项目和/或任意数量的项目，我很想使用 jQuery 脚本，可能使用 CSS 网格来迭代和设置位置。 可能有纯 CSS 和 HTML 方式来容纳更多任意数量的元素。 这实际上取决于您的应用程序。

 .container { display: grid; width: 800px; grid-template-columns: repeat(60, 10px); grid-column-gap: 16px; grid-row-gap: 8px; } #button1 { grid-column-start: 4; } #button2 { grid-column-start: 8; } #button3 { grid-column-start: 12; } #button4 { grid-column-start: 16; } #button5 { grid-column-start: 20; } #button6 { grid-column-start: 6; grid-row-start: 2; } #button7 { grid-column-start: 10; grid-row-start: 2; } #button8 { grid-column-start: 14; grid-row-start: 2; } #button9 { grid-column-start: 18; grid-row-start: 2; } button { width: 100px; height: 40px; background: none; border: 4px solid red; font-size: 16px; }

 <div class='container'> <button id="button1">1</button> <button id="button2">2</button> <button id="button3">3</button> <button id="button4">4</button> <button id="button5">5</button> <button id="button6">6</button> <button id="button7">7</button> <button id="button8">8</button> <button id="button9">9</button> </div>

Answer 3

您可以使用margin来设置间距：

 .container { width: 600px; border: 1px solid; } section { display: flex; flex-flow: row wrap; justify-content: center; margin: -8px -8px 0; } button { width: 100px; height: 40px; margin: 8px 8px 0; border: 4px solid red; background: none; font-size: 16px; }

 <div class="container"> <section> <button>1</button> <button>2</button> <button>3</button> <button>4</button> <button>5</button> <button>6</button> <button>7</button> <button>8</button> <button>9</button> </section> </div>

Answer 4

一个简单的解决方案是使用 box-sizing，然后使用填充控制垂直和水平间距。

.flex-item {
  box-sizing: border-box;
  padding: 4px 8px;
}

或者普遍适用：

*, *:before, *:after {
  box-sizing: border-box;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Answer 5

您没有控制问题中元素之间的空间，因为您使用的是padding属性，元素一个接一个，但您正在达到效果。 如果您为每个人添加背景，您会注意到我要解释的内容。

要控制 flexbox 布局（或其他）中元素之间的空间，您需要在项目上使用边距，在这种情况下，在display: flex;内的项目上display: flex; 元素。

由于 SCSS 变量，我使用了 calc 值，这里我将变量名称更改为 30px。

有一个片段可以达到你想要的。

 .flexcontainer { padding: 0 15px; width: 100%; border:1px solid black; } .flexrow { display:flex; flex-flow: row wrap; /* only horizontal negative margin for beggining and end of the element, as you may not know which element is first on the left or right, it will compensate the padding of container */ margin: 0px calc(30px/2 * -1); justify-content: space-around; } .flexrow.row-5-el > .element { flex: 0 1 calc(100%/5 - 30px); max-width: calc(100%/5 - 30px); /* sets 15px of margin on each side */ margin: calc(30px/2); /* for testing purposes */ outline: 1px auto green; }

 <div class="flexcontainer"> <div class="flexrow row-5-el"> <div class="element"> Lorem ipsum </div> <div class="element"> Lorem ipsum </div> <div class="element"> Lorem ipsum </div> <div class="element"> Lorem ipsum </div> <div class="element"> Lorem ipsum </div> <div class="element"> Lorem ipsum </div> <div class="element"> Lorem ipsum </div> <div class="element"> Lorem ipsum </div> <div class="element"> Lorem ipsum </div> </div> </div>

如果你想让第一项从左边 0 开始，你只需要删除容器填充。

这是我前段时间做的一个活生生的例子： https : //codepen.io/joelbonetr/pen/gOpPYbR

（没有 justify-content 因为所需的效果是保持包裹的元素向左对齐）