如何在 inline-flex 元素的一侧创建边距？ [复制]答案

【问题标题】：How to create margins to the side of inline-flex elements? [duplicate]如何在 inline-flex 元素的一侧创建边距？ [复制]
【发布时间】：2019-08-08 19:24:37
【问题描述】：

我正在创建一个 flexbox 布局。我希望两个 flex 容器内联显示，并且它们与屏幕背面之间的空间相等（即，第一个的左边距相等，第二个的右边距相等）。现在我对 CSS flexbox 的了解只有 display: flex 和 display: inline-flex，所以我想避免包含高级 flexbox 属性的解决方案路径。

为此，我将文档的边距和内边距设置为 0，将 box-sizing 设置为 border-box 以防止容器改变其原始宽度，将 display 属性设置为 inline-flex，使两个容器的尺寸相等。

.item1 {
    display: inline-flex;
    margin-top: 5vh;
    background-color: #ff8000;
    border: 3px solid transparent;
    height: 30vh;
    width: 40vw;
    /*margin-left: 9vw;*/
}

.item2 {
    margin-top: 5vh;
    display: inline-flex;
    background-color: #ff8000;
    border: 3px solid transparent;
    height: 30vh;
    width: 40vw;
    /*margin-right: 9vw;*/
}

<div class="item1"></div>
<div class="item2"></div>

我还将第一个项目的 margin-left 设置为等于第二个项目的 margin-right，但它们在视觉上明显不同。

【问题讨论】：

所以你想让这两个框居中，还是什么？
是的，我希望它们居中，并且我希望它们在两侧具有相等的空间。
通过在父元素上设置text-align: center，内联元素通常可以居中。 “现在我对 CSS flexbox 的了解只有 display: flex 和 display: inline-flex，所以我想避免包含高级 flexbox 属性的解决方案路径。” - 为什么，如果这样会有什么问题你学到了新东西吗？
因为我想知道不止一种解决问题的方法，包括依赖先前知识的方法。
这是您要查找的内容：jsfiddle.net/srfv3txp 吗？我创建了带有justify-content: center 的flex 容器，该容器以元素为中心。

标签： css flexbox

【解决方案1】：

在这种情况下，您需要使用 flex 属性 justify-content: space-evenly;。这将做的是均匀地间隔所有元素，包括右边距和左边距。但为此，您需要创建一个容器，其中包含您想要的项目。看下面的例子：

.flex{
	display: flex;
	justify-content: space-evenly;
}

.item {
    margin-top: 5vh;
    background-color: #ff8000;
    border: 3px solid transparent;
    height: 30vh;
    width:20vw;
}

<div class="flex">
	<div class="item"></div>
	<div class="item"></div>
  <div class="item"></div>
</div>

【讨论】：

【解决方案2】：

检查这个例子：

.flex { 
display: flex;
}
.center { 
   margin: auto;d
}

.item1 {
    display: inline-flex;
    margin-top: 5vh;
    background-color: #ff8000;
    border: 3px solid transparent;
    height: 30vh;
    width: 40vw;
    /*margin-left: 9vw;*/
}

.item2 {
    margin-top: 5vh;
    display: inline-flex;
    background-color: #ff8000;
    border: 3px solid transparent;
    height: 30vh;
    width: 40vw;
    /*margin-right: 9vw;*/
}

<!-- display: flex to center it's content-->
<div class="flex">
<!-- margin: auto to to be centered -->
   <div class="center">
      <div class="item1"></div>
      <div class="item2"></div>
   </div>
</div>

【讨论】：