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

  • Z时代
  • 2024-01-10
  • 分类：问答

什么是最简单的方法来选择flexbox容器的所有子元素，并给他们所有相同的余量，例如？最简单的方法来选择Flex容器的所有元素？

例子：

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

回答：

要选择直接儿童（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>

回答：

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

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

回答：

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

以上是 最简单的方法来选择Flex容器的所有元素？ 的全部内容， 来源链接： utcz.com/qa/263059.html

回到顶部