我有一個父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