选择 Flex 容器的所有元素的最简单方法？

Question

例如，选择 flexbox 容器的所有子元素并赋予它们相同的边距的最简单方法是什么？

例子：

<div class="flexboxcontainer">
<h1>Headline</h1>
<p>Some Text</p>
<div>Some more text</div>
<p class="smalltext">Some small text</p>
</div>

Answer 1

要选择直接子项（弹性容器的 1 级子项）：

.flexboxcontainer {
  display: flex;
}

.flexboxcontainer>* {
  /*Select only 1 level children */
  padding: 20px;
  border: 2px solid black;
}

<div class="flexboxcontainer">
  <h1>Headline</h1>
  <p>Some Text</p>
  <div>Some more text
    <h3>Random stuff</h3>
  </div>
  <p class="smalltext">Some small text
    <span>Additional text</span>
  </p>
</div>

要选择所有子项，即后代（弹性容器的所有级别子项）：

.flexboxcontainer {
  display: flex;
}

.flexboxcontainer * {
  /*Select all level children */
  padding: 20px;
  border: 2px solid black;
}

<div class="flexboxcontainer">
  <h1>Headline</h1>
  <p>Some Text</p>
  <div>Some more text
    <h3>Random stuff</h3>
  </div>
  <span class="smalltext">Some text
    <p>More text</p>
  </span>
</div>