Flexbox 不是全寬

Question

我有一個像這樣的基本彈性盒..

 .masonry_container { display: flex; } .masonry_left_col { border: 1px solid grey; } .masonry_right_col { border: 1px solid grey; }

 <div class="masonry_container"> <div class="masonry_left_col"> Content </div> <div class="masonry_right_col"> Content </div> </div>

為什么它沒有延伸到整個寬度？

我知道這可能真的很簡單，但我無法解決，我哪里出錯了？

Answer 1

容器實際上是100% 寬，即跨越窗口的整個寬度。 但是使用默認的 flex 設置，它的子元素將簡單地向左對齊，並且僅與它們的內容一樣寬。

但是，如果你應用flex-grow: 1; 到子元素以使它們變得更寬，它們將拉伸並填充容器的整個寬度。

 .masonry_container { display: flex; } .masonry_left_col { border: 1px solid grey; flex-grow: 1; } .masonry_right_col { border: 1px solid grey; flex-grow: 1; }

 <div class="masonry_container"> <div class="masonry_left_col"> Content </div> <div class="masonry_right_col"> Content </div> </div>

或者，如果您只想讓 flex 項目在容器內完全左右移動而不拉伸，請將justify-content: space-between添加到容器中

 .masonry_container { display: flex; justify-content: space-between; } .masonry_left_col { border: 1px solid grey; } .masonry_right_col { border: 1px solid grey; }

 <div class="masonry_container"> <div class="masonry_left_col"> Content </div> <div class="masonry_right_col"> Content </div> </div>

Answer 2

flex 容器確實擴展了整個寬度——它是一個塊級元素。

 .masonry_container { display: flex; border: 1px solid red; } .masonry_container > div { border: 1px solid grey; background-color: lightgreen; }

 <div class="masonry_container"> <div class="masonry_left_col">Content</div> <div class="masonry_right_col">Content</div> </div>

但是彈性項目有兩個阻止自動擴展的默認設置：

• flex-basis: auto
• flex-grow: 0

這意味着項目占用其內容的長度並且不占用可用空間。

對於要擴展的項目，您需要覆蓋flex-grow默認值。

 .masonry_container { display: flex; border: 1px solid red; } .masonry_container > div { flex-grow: 1; border: 1px solid grey; background-color: lightgreen; }

 <div class="masonry_container"> <div class="masonry_left_col">Content</div> <div class="masonry_right_col">Content</div> </div>

Answer 3

您可以指定您希望您的 flex 孩子grow的范圍。 如果您希望每個項目共享相同的寬度，只需為兩個孩子設置flex-grow: 1即可。

 .masonry_container { display:flex; } .masonry_left_col { border:1px solid grey; flex-grow: 1; /* 33% width relative to right column */ } .masonry_right_col { border:1px solid grey; flex-grow: 2; /* 66% width relative to left column */ }

 <div class="masonry_container"> <div class="masonry_left_col"> Content </div> <div class="masonry_right_col"> Content </div> </div>

Answer 4

另請查看容器

這應該是容器流體（因此 flex 容器的父級將跨越 100%）