當發生換行時，為什麼 Flex 專案會居中對齊而不是左對齊，以及如何修復它？

Flex 項目：左對齊而不是居中對齊

在這種情況下，您的目標是使用三個行顯示社交媒體圖示行動選單中基於Flex 的ul 元素。所需的對齊方式是並排且間距相等。雖然您已經實現了並排定位，但在新增其他圖示時會出現問題，導致下一行從中心而不是左側對齊。

解決方案：

要修正此對齊問題，請將 justify-content: space-around 規則替換為 justify-content: space- Between。

說明：

根據 Flexbox 規範， justify-content: space-around 沿線均勻分佈 Flex 項目，兩端各有一半大小的空格。但是，當只有一個 Flex 項目或負剩餘空間時，它的行為與居中相同，只有當兩行中都有三個項目時才會產生所需的行為。

相反， justify-content: space -在不增加任何額外的末端空間的情況下均勻分佈彈性項目。當只有一個 Flex 項目或負剩餘空間時，它預設為 Flex-Start，從左側對齊 Flex 項目。

利用 space- Between，您的 Flex 專案將始終向左對齊，確保單行和換行的所需行為。

以上是當發生換行時，為什麼 Flex 專案會居中對齊而不是左對齊，以及如何修復它？的詳細內容。更多資訊請關注PHP中文網其他相關文章！