防止 Flex 項目並排顯示
Flexbox 提供了一種在區塊內對齊項目的有效方法。但是，如果您遇到希望項目垂直而不是水平顯示的情況，預設的彈性行為可能會成為障礙。
問題陳述：
儘管使用 Flexbox 將項目集中在區塊中，項目繼續並排顯示。期望的結果是每個項目佔據自己的行。例如，橘色方塊應該位於文字上方，但 Flex 將其重新定位到文字旁邊。
解決方案：
解決此問題的關鍵在於添加以下樣式：
.inner {
flex-direction: column;
}透過指定「column」作為Flex 方向，我們指示Flexbox垂直顯示其子項目。這解決了問題並按預期定位項目。
更新的程式碼片段：
<div class="container">
<div class="inner">
<div class="square"></div>
<p>some text</p>
</div>
</div>
<style>
.container {
...
}
.inner {
...
flex-direction: column;
}
.square {
...
}
</style>將“flex-direction”屬性設為“column”， Flexbox 元素現在將按行顯示，解決了原來並排定位的問題。
以上是如何防止 Flex 項目並排顯示？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
