如何在換行時左對齊Flex 項目
問題:
移動菜單以三行的形式顯示社交媒體圖標,以等間距水平排列。但是,當存在超過三個項目時,後續行開始從中心填充。目標是在不破壞等間距的情況下左對齊每行中的清單項目。
解決方案:
將justify-content: space-around 屬性替換為justify-content: space- Between.
說明說明:
在CSS Flexbox 中, justify-content 屬性沿著主軸水平對齊項目。 space-around 均勻分佈項目,兩端有一半大小的空間。然而,當行上空間有限或只有一個項目時,它的作用類似於 center,導致專案居中。 相反,space- Between 均勻分佈項目,兩端沒有半大小的空格。當空間有限或只有一個項目時,它的行為類似於 flex-start,將項目左對齊。 透過使用 justify-content: space- Between,社群媒體圖示將在每個專案中左對齊行,確保下一行從左側填滿。附加說明:
使用空格時,可以將左右填充添加到容器中模擬周圍空間的行為。但是,這可能需要進一步調整以適應每行上多個項目的對齊方式。以上是換行時如何將 Flex 項目向左對齊?的詳細內容。更多資訊請關注PHP中文網其他相關文章!