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

选择直接子项（Flex容器的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>

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

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

Answer 2

.flexboxcontainer > * {
    /* You properties */
}

它与flex无关 - 您可以使用上面的选择器选择元素的所有直接子节点。

Answer 3

对于直接子项.flexboxcontainer > * { ... }，所有子项.flexboxcontainer * { ... }