首頁  >  文章  >  web前端  >  利用CSS3進行彈性佈局時內容對齊的方法詳解

利用CSS3進行彈性佈局時內容對齊的方法詳解

巴扎黑
巴扎黑原創
2017-08-07 14:32:272229瀏覽

這篇文章主要介紹了CSS3彈性佈局內容對齊(justify-content)屬性使用詳解,具有一定的參考價值,有興趣的可以了解一下

內容對齊(justify-content)屬性應用在彈性容器上,把彈性項沿著彈性容器的主軸線(main axis)對齊。

此操作發生在彈性長度以及自動邊距被確定後。 它用來在存在剩餘空間時如何加以分配,也會在發生內容溢出時影響項目的對齊。

注意:彈性佈局中有兩個基本術語main axis和cross axis,一般情況下,我們可以把它們各自看作是螢幕上的行向和列向(但是嚴格講,這和寫模式以及彈性流方向有關)。

那麼main-start和main-end就可以分別被看作是彈性容器的左右邊。

justify-content語法如下:

#justify-content: flex-start | flex-end | center | space-between | space-around

參數說明如下:

flex-start

彈性項目向行頭緊鄰填充。這個是預設值。第一個彈性項的main-start外邊距邊線被放置在該行的main-start邊線,而後續彈性項依序平齊擺放。

flex-end

彈性項目向行尾緊鄰填充。第一個彈性項的main-end外邊距邊線被放置在該行的main-end邊線,而後續彈性項依次平齊擺放。

center

彈性項目居中緊鄰填滿。 (如果剩餘的自由空間是負的,則彈性項目將在兩個方向上同時溢出)。

space-between

彈性項目平均分佈在該行上。如果剩餘空間為負值或只有一個彈性項,則該值等同於flex-start。否則,第1個彈性項的外邊距和行的main-start邊線對齊,而最後1個彈性項的外邊距和行的main-end邊線對齊,然後剩餘的彈性項分佈在該行上,相鄰項目的間隔相等。

space-around

彈性項目平均分佈在該行上,兩邊留有一半的間隔空間。如果剩餘空間為負值或只有一個彈性項,則該值等同於center。否則,彈性項目沿著該行分佈,且彼此間隔相等(例如是20px),同時首尾兩邊和彈性容器之間留有一半的間隔(1/2*20px=10px)。

justify-content屬性取值效果範例

上圖很直覺的示範了以上5個取值的效果與差異。

以上是利用CSS3進行彈性佈局時內容對齊的方法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn