Создайте пространство между гибкими детьми и внуками

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

Итак, в основном вы хотите отобразить внуков как пустых детей.Вы можете сделать это с текущей разметкой с помощью display: содержимое

Caniuse:

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>

Примечание: В настоящее время display: contents еще не поддерживается в Edge.

Answer 2

Вы можете попробовать с полем css (добавлен общий класс "create-space")

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

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