Question

我有几个弹性行，我想设置一个外边距或填充，以便例如内容不会达到屏幕边缘的50px内。

我尝试过使用width，min-width和flex-basis进行各种操作以使其发挥作用。每当我得到接近正确的内容时，内容就会由于某种原因而变得不对齐，和/或一堆内容溢出视口之外。

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

我正在使用的Flex设置是：

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”flex项目，但这也不会产生预期的结果。

基本上，我希望一切都缩小而不是到达边界，保持一定的宽度远离视口的边缘，然后在某一点上分成两行。

Answer 1

首先，一些注意事项：

你不需要绝对定位来获得你想要的小提琴，除非你因为其他原因而拥有它。
您设置了几个justify-content属性。您可以删除justify-content: center一个。
您也不一定需要为div指定100％的宽度，因为使用flex显示会自动使这些div填充它们周围的空白区域。
此外，除非您尝试覆盖其他样式，否则无需指定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

Answer 2

不是flexbox会搞砸边缘。这是position: absolute。

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

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

然后将它们水平居中。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

revised fiddle

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

2 个答案: