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

我有几个灵活的行，我想设置一个外边距或填充，这样的内容，例如，将不会达到50像素的屏幕边缘

我已经尝试了各种各样的方法来处理

width

、

minwidth

和

flex basis

，以使其发挥作用。每次我得到接近正确的内容时，由于某种原因，内容会变得不对齐，和/或大量内容溢出到视口之外

当不使用flex box时，只需设置

margin:auto 50px在行，但使用flex box，我似乎无法使其工作

我使用的Flex设置包括：


div{
位置：绝对位置；
宽度：100%；
显示器：flex；
证明内容：中心；
弯曲方向：行；
证明内容：之间的空间；
}
分区：第n个类型（1）{
排名前10%；
保证金：0；
}
分区：第n个类型（2）{
最高：20%；
保证金：自动50px；
}

一,

二,

三,

四,

一,

二,

三,

四,

首先，请注意：

你不需要绝对定位来获得你想要的小提琴的对齐，除非你有其他原因
您有两个
justify content
属性集。您可以删除
justify content:center
one
您也不一定需要为div指定100%的宽度，因为使用flex显示将自动使这些div填充其周围的空白
此外，您不需要指定
flex-direction:row
，除非您试图覆盖其他样式。行是默认值
因此，一旦我们简化了CSS，就只需要添加边距或填充。您可以给div一个简单的边距，例如
margin:50px
，或者，如果您想在整个内容组周围创建一个框的效果，而不需要在标记中实际包含一个容器，您可以给所有行相同的左、右边距，同时给第一行一个上边距，给最后一行一个下边距

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

HTML:

更多阅读：，
不是flexbox弄乱了利润空间。它的
位置：绝对

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

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

然后将它们水平居中


正文{
位置：相对位置；
高度：100vh；
保证金：0；
}
div{
位置：绝对位置；
显示器：flex；
证明内容：之间的空间；
宽度：80%；
左：50%；
转化：translateX（-50%）；
背景颜色：黄色；
}
div:n类型（1）{top:10%；}
div:n类型（2）{top:25%；}
div>p{
弹性：1；
文本对齐：居中；
边框：1px黑色虚线；
}

一,

二,

三,

四,

一,

二,

三,

四,

通过添加带有媒体查询的
flex:0 50%
似乎可以实现所需的行为。。。但这仍然不允许我对flex行的外缘进行精细控制。我很想知道如何以更直接的控制方式完成。并不是flexbox弄乱了利润。它的
位置：绝对
。从文档流中删除元素时，它不关心周围的元素。它直接穿过他们。你的flex容器必须绝对定位吗？@Michael_B啊，这很有道理。。。是的，这是一个多页面应用程序中的一个全页面屏幕，因此为了让它以我想要的方式响应，我使用了基于媒体查询的上/下和百分比。我通过摆弄各种收缩/增长/基值，基本上实现了我想要的行为，但我仍然喜欢更严格的控制。有什么建议可以让我对这种性质的事物进行离散设置吗？
<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>

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