如何在 flex 行上设置外部填充/边距？

Question

我有几个 flex 行，我想设置外边距或填充，这样内容就不会到达屏幕边缘的 50px 以内。

我已经尝试了各种与width、min-width 和flex-basis 混淆的方法来使其正常工作。每次我得到一些接近正确的东西时，内容都会由于某种原因而未对齐，和/或一堆内容溢出视口。

当不使用 flex-box 时，这非常简单，只需在行上设置 margin: auto 50px;，但使用 flex-box 我似乎无法使其工作。

我使用的弹性设置是：

div {
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: row;
  justify-content: space-between;
}
div:nth-of-type(1) {
  top: 10%;
  margin: 0;
}
div:nth-of-type(2) {
  top: 20%;
  margin: auto 50px;
}

<div>
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
</div>

<div>
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
</div>

jsfiddle

在此示例中，我希望第二行的行为与第一行一样，一切都很好且居中对齐，但内容位于原始视口内，并在第二行的外部添加了 50px 的边距的简单更改行。

更新

现在还尝试在外部使用min-width 或flex-basis 在该行中添加两个“spacer”弹性项目，但这也不会产生预期的结果。

基本上，我希望所有内容都缩小而不是到达边界，与视口边缘保持一定宽度，然后在某个点分成两行。

Answer 1

弄乱边距的不是 flexbox。我是position: absolute。

当您从文档流中删除一个元素时，它并不关心周围的框属性（如内容、填充和边距）。它直接穿过它们。

另一种方法是为每个容器设置最大宽度。

然后将它们水平居中。

body {
  position: relative;
  height: 100vh;
  margin: 0;
}
div {
  position: absolute;
  display: flex;
  justify-content: space-between;
  width: 80%;
  left: 50%;
  transform: translateX(-50%);
  background-color: yellow;
}
div:nth-of-type(1) { top: 10%; }
div:nth-of-type(2) { top: 25%; }
div > p {
  flex: 1;
  text-align: center;
  border: 1px dashed black;
}

<div>
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
</div>
<div>
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
</div>

revised fiddle

Answer 2

首先，一些注意事项：

1. 你不需要绝对定位来获得你想要的对齐方式，除非你有其他原因。
2. 您设置了几个justify-content 属性。您可以删除justify-content: center 一个。
3. 您也不一定需要为 div 指定 100% 的宽度，因为使用 flex 显示会自动使这些 div 填充它们周围的空白空间。
4. 此外，您无需指定flex-direction: row，除非您尝试覆盖其他样式。行是默认设置。

因此，一旦我们稍微简化了 CSS，就只需要添加边距或内边距即可。您可以给 div 一个简单的边距，例如margin: 50px，或者，如果您想在整个内容组周围创建一个框的效果，而实际上在您的标记中没有一个容器，您可以给所有行相同的左边和右边距，同时给第一个上边距，最后一个下边距。

后一种情况的示例，使用小提琴中的标记：

HTML：

<div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>

<div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>

CSS：

div {
  display: flex;  
  justify-content: space-between;
}
div:nth-of-type(1) {
  margin: 50px 50px 0 50px;
}
div:nth-of-type(2) {
  margin: 0 50px 50px 50px;
}

更多阅读：W3Schools Flexbox guide, CSS Tricks guide with nice illustrations