如果之前的兄弟對象被浮動，則Flex容器溢出

如果先前的同級設置爲寬度爲100％的float，並且後面的同級設置爲display: flex，後者會溢出父容器而不是換行到新行。如果之前的兄弟對象被浮動，則Flex容器溢出

與任何其他display值，但flex（或grid）它包裝，因爲它應該，那爲什麼它不會當設置爲flex

.float-left { 
 
    float: left; 
 
    width: 100%; 
 
} 
 

 
.display-flex { 
 
    display: flex; 
 
    background: yellow; 
 
} 
 

 

 
/* Demo css */ 
 

 
.container { 
 
    max-width: 80%; 
 
    margin: auto; 
 
    background: white; 
 
}

<div class="container"> 
 
    <div class="float-left">I'm floating left, with a width of 100%.</div> 
 
    <div class="display-flex">'Floating left' takes up 100% of the space, but still i don't go onto a new line?</div> 
 
</div>

來源

2017-08-29 Ubby

你想達到什麼目的？ – Phantom

嗯，有趣。如果你使它成爲'inline-flex'，它會包裝。我想這可能是您找到的Flexbox錯誤，但由於所有瀏覽器都具有相同的行爲，因此可以通過設計。讓我們知道你想要完成什麼，我們將找到一個解決方法 – LGSon

Ubby，我編輯了你的問題，所以更清楚這與'.display-flex'_not_無關是一個彈性項目，它是關於它是一個彈性容器。 – LGSon

的問題是，元素.display-flex不是Flex項目。它是標準塊容器中的子元素。

因此，flex速記屬性及其僅適用於flex項目的longhand組件屬性不起作用。

但是，width屬性適用於彈性項目和容器。

來源

2017-08-29 13:25:00

我剛剛用各種'display'值對它進行了測試，並且它會覆蓋到'flex'和'grid'之外的任何值。 –

現在我們從Boltclock得到了一個很好的解釋:) – LGSon

也許你應該刪除（或更正）它，因爲它實際上並沒有回答這個問題？ – LGSon

出現一個塊框來包裝時，其前一個兄弟是用100％的寬度的浮動的原因是因爲it's not actually the box that's wrapping, it's its inline content that's wrapping。

這不會發生在flex容器上的原因是因爲floats cannot intrude into flex formatting contexts。實際上，塊格式化上下文也會發生同樣的情況 - 如果您將overflow: auto或overflow: hidden應用於以下不帶display: flex的兄弟，則以下兄弟似乎完全消失。（這意味着，只有當塊框不不建立塊格式化上下文中的第一款是真實的。）

由於您的浮動是100％的寬度，柔性容器的（汽車），寬度減小到0。其內聯後代不會包裝在float之下，因爲這些內聯後代參與了一個匿名Flex項目內的內聯格式化上下文，由於它是Flex容器中唯一的Flex項目，因此它本身不會包裝。此Flex項目溢出Flex容器;然而，柔性容器本身不會溢出容納塊，因爲它的使用寬度爲0，允許它坐在浮子旁邊。

原因柔性容器將包如果是display: inline-flex代替display: flex是因爲一個行內的柔性容器的行爲就像任何其他行內的內容，在浮點周圍包裹。在這種情況下，它是包裝的彈性容器本身 - 它的內聯內容仍然被格式化爲匿名彈性項目，因爲flex layout is identical regardless of whether the flex container itself is inline-level or block-level。

來源

2017-08-29 18:49:54 BoltClock

這是有道理的，謝謝... + 1 – LGSon

你能解釋爲什麼，當我添加'border：solid '爲'display-flex'項目，它按預期行事嗎？ – Duannx

@Duannx：添加一個邊框會導致flex容器的總寬度大於零，導致它在float下移動，因爲不再有任何空間，如[CSS2的9.5節]（https： //www.w3.org/TR/CSS22/visuren.html#floats）。 – BoltClock

如果之前的兄弟對象被浮動，則Flex容器溢出

回答

相關問題