最简单的方法来选择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>

Answer 2

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

它无关，与弯曲 - 你可以选择与上述选择元素的所有直接子。

Answer 3

对于直接孩子，这将是.flexboxcontainer > * { ... }，为所有儿童.flexboxcontainer * { ... }