Question

考虑以下结构

<div class="parent" style="display: flex">
    <div class="child1"></div>
    <div class="child2" style="display: flex">
        <div class="grandchild1"></div>
        <div class="grandchild2"></div>
    </div>
</div>

是否可以在.child1和.child2之间以及.grandchild1和.granchild2之间创建装订线（边距）？基本上，最终结果应该是彼此相邻的3个框，它们之间具有相等的边距。

Answer 1

您可以尝试使用css - margin（添加常用类＆＃34;创建空间＆＃34;）

＆＃13;

.create-space{
  margin-right : 20px;
  border: 5px solid green;
  }

＆＃13;

<div class="parent" style="display: flex">
    <div class="child1 create-space">child1</div>
    <div class="child2" style="display: flex">
        <div class="grandchild1 create-space">grandchild1</div>
        <div class="grandchild2 create-space">grandchild2</div>
    </div>
</div>

＆＃13;

Answer 2

所以基本上你想要像空子一样展示孙子。您可以使用docs

的当前标记执行此操作

display: contents

display: contents会导致元素的子元素显示为它们是元素父元素的直接子元素，忽略元素本身。当应该忽略包装元素时，这可能很有用使用CSS网格或类似的布局技术时。

.parent {
  display: flex;
  justify-content: space-between;
}
.parent div {
  width: 30%;
  height: 100px;
  border: 5px solid tomato;
}
.child2 {
  display: contents;
}

<div class="parent">
  <div class="child1">child1</div>
  <div class="child2">
    <div class="grandchild1">grandchild1</div>
    <div class="grandchild2">grandchild2</div>
  </div>
</div>

NB： Edge目前尚不支持display: contents。

在flex儿童和孙子女之间创造空间

2 个答案: