Easiest way to select all elements of a Flex Container?

Question

What is the easiest way to select all child elements of a flexbox container and give them all the same margin for example?

Example:

<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

To select the direct children (level 1 children of the flex container):

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

To select all children i.e descendants (all level children of the flex container):

.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 */
}

It has nothing to do with flex - you can select all direct children of an element with the selector above.

Answer 3

For the direct children that would be .flexboxcontainer > * { ... }, for all children .flexboxcontainer * { ... }