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個取值的效果和差異。

我們能夠通過在線實例代碼來自己測試下:

http://wow.techbrood.com/fiddle/17128


by iefreer


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM