Flex 容器項目左對齊

在行動選單中，使用 Flexbox 排列社群媒體圖示清單。為了確保相等的間距，請使用 justify-content: space-around 。但是，當行包含三個以上的項目時，它們會居中對齊而不是左對齊。

困境

出現問題的原因是 justify-content: space- around 均勻地分佈項目，兩端各有一半大小的空間。當剩餘空間為負數或存在單一項目時，其行為類似於居中。這會導致在給定場景中出現不必要的居中對齊行為。

解決方案

要對齊換行時留下的項目， justify-content: space- Between 是回答。這種變化可確保均勻分佈，但如果可用空間為負數或行中有單一項目，其行為類似於 flex-start，它將項目左對齊。

範例程式碼

將 justify-content: space-around 替換為 justify-content: space- Between 可解決對齊問題。此外，可以在容器中添加左右填充，以模仿周圍空間的間距效果。

進一步考慮因素

可能出現的潛在挑戰是：兩個物品包裹並對齊在容器的兩端。然而，解決這個問題完全是一個單獨的問題。