Question

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

为此，我将文档的页边距和填充设置为0，将框大小设置为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>

我还将第一个项目的左边距设置为等于第二个项目的右边距，但是它们在外观上明显不同。

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

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

如何在inline-flex元素的侧面创建边距？

2 个答案: