我有一个父div与display: flex。我想为其中一个孩子div忽略这一点。如何让div忽略它的父级显示：flex
例如，我想是这样的：
儿童DIV1
儿童DIV2，儿童DIV3，儿童DIV4
我想第一个孩子DIV1是在上面，而无需任何其他元素它是线。我知道我可以做到这一点，如果我只是把孩子div1带到父母的外面，但是知道另一种方式是很好的。
/* Parent div */
.boxContainer {
display: flex;
height: 500px;
width: 100%;
}
/* Child div1 */
.headerBox {
height: 100px;
}
/* more child div */
.imgBox {
margin-top: 100px;
height: 375px;
width: 375px;
}
要完全承担项目的Flexbox的流量外，你可以设置它的位置 到absolute，然后移动它，你想top，left，等...
设置position: absolute对孩子，position: relative父：
.boxContainer {
/** Parent div **/
position: relative;
display: flex;
height: 500px;
width: 100%;
}
.headerBox {
/** Child div1 **/
position: absolute;
top: -50px;
/** move it up **/
height: 100px;
}
.imgBox {
/** more child div **/
margin-top: 100px;
height: 375px;
width: 375px;
}
如果你只需要在第一个项目除了可以使用f法包，和第一元素上设置margin-right: 100%：
/* Parent div */
.boxContainer {
display: flex;
height: 200px; /** I've changed the dimensions to fit the demo windows **/
width: 100%;
flex-wrap: wrap;
}
/* Child div1 */
.headerBox {
margin-right: 100%;
height: 100px;
}
/* more child div */
.imgBox {
height: 75px;
/** I've changed the dimensions to fit the demo windows **/
width: 75px;
/** I've changed the dimensions to fit the demo windows **/
}<div class="boxContainer">
<div class="headerBox">headerBox</div>
<div class="imgBox">imgBox</div>
<div class="imgBox">imgBox</div>
<div class="imgBox">imgBox</div>
<div class="imgBox">imgBox</div>
<div class="imgBox">imgBox</div>
<div class="imgBox">imgBox</div>
<div class="imgBox">imgBox</div>
<div class="imgBox">imgBox</div>
</div>我认为你必须覆盖在孩子做的显示值，只是把display: inline;的孩子（的display默认值）。
你尝试过吗？ 1 /它可能是一个div（或部分，文章，头文件或一个等效的元素），所以display的默认值是block，而不是inline 2 /这是一个flex项目，现在parent元素已经用它的'display：flex'设置了一个flex上下文。 。除了'position：absolute'或'display：none'之外，没有多少东西会产生效果（如果没有这个元素作为flex项目，效果会很好） – FelipeAls
呵呵，哈哈。对不起，我几乎没有使用flex的经验（我认为它和其他显示属性一样）;只是想我会尽力帮忙！ :) – gloriousCatnip
您可以使用绝对定位
.boxContainer {
display: flex;
height: 500px;
width: 100%;
background: blue;
margin-top: 120px;
position: relative;
}
.headerBox {
height: 100px;
width: 100%;
background: red;
position: absolute;
top: -110px;
left: 0;
}
.imgBox {
margin-top: 100px;
height: 375px;
width: 375px;
background: green;
}<div class="boxContainer">
<div class="headerBox"></div>
<div class="imgBox"></div>
</div>我想第一个孩子DIV1在没有任何东西的情况下处于顶峰其他 元素在它的行中。
最简单的方法是在第一个孩子上设置flex-basis: 100%。
由于它会占用全部宽度并将其余项目向下推，并且它完全响应。
此外，您还需要添加flex-wrap: wrap;
/* Parent div */
.boxContainer {
display: flex;
flex-wrap: wrap; /* added */
align-content: flex-start; /* added, so they align at the top */
height: 500px;
width: 100%;
}
/* Child div1 */
.headerBox {
flex-basis: 100%; /* added */
height: 100px;
background: lightblue;
margin: 2px;
}
/* more child div */
.imgBox {
height: 175px;
width: 175px;
background: lightgray;
margin: 2px;
}<div class="boxContainer">
<div class="headerBox">Header box</div>
<div class="imgBox">Image box</div>
<div class="imgBox">Image box</div>
<div class="imgBox">Image box</div>
</div>对我来说，好像你真的不想要一个flexbox。我会用这个float: left。在width: 0的div上使用clear: left以获得下一个换行到下一行。 Flexbox很好，但如果旧技术对你更好用，那就使用它。
编辑：在看过帖子后，我没有意识到你想要第一个div也占据100％的宽度。其他答案已经指出，使用flexbox可以更好地完成这项工作。尽管给别人留下了这个答案。
例子：
.container{
width: 100%;
}
.container .img{
width: calc(25% - 20px);
height: 100px;
background-color: lightblue;
margin: 10px;
float: left;
}
.clear-left{
clear: left;
width: 0;
}<div class="container">
<div class="img"></div>
<div class="clear-left"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>的第一个子元素并不需要忽略弯曲。如果flex-basis设置为100％，它将占用全宽。然后使用flex-wrap: wrap;为子元素的其余部分按照新的行。
.parent {
display: flex;
flex-wrap: wrap;
}
.parent > div:first-child {
flex: 1 0 100%;
}
/* flex is shorthand for flex-grow + flex-shrink + flex-basis */
这确实是最好的移动头部的容器外完成。特别是在头部的情况下。 – Don