講解下彈性布局中的justify-content


justify-content屬性定義了項目在主軸上的對齊方式,它可能有五個值。
1.flex-start
從行首開始排列。每行第一個彈性元素與行首對齊,同時所有后續的彈性元素與前一個對齊。
下圖:flex-direction定義了主軸的方向為水平方向,起點在左端,,所以將justify-content定義為flex-start時,彈性盒中的元素是從左開始排列的

 

下圖:flex-direction定義了主軸的方向為水平方向,起點在右端,,所以將justify-content定義為flex-start時,彈性盒中的元素是從右開始排列的

 

下圖:flex-direction定義了主軸的方向為垂直方向,起點在上方,,所以將justify-content定義為flex-start時,彈性盒中的元素是從上到下開始排列的

 

下圖:flex-direction定義了主軸的方向為垂直方向,起點在下方,,所以將justify-content定義為flex-start時,彈性盒中的元素是從下到上開始排列的

 

綜上所述:當justify-content屬性為flex-start時,項目沿着主軸開始方向對齊

 

2.flex-end
從行尾開始排列。每行最后一個彈性元素與行尾對齊,其他元素將與后一個對齊。
下圖:flex-direction定義了主軸的方向為水平方向,起點在左端,,所以將justify-content定義為flex-start時,彈性盒中的元素是從右開始排列的

 

下圖:flex-direction定義了主軸的方向為水平方向,起點在右端,,所以將justify-content定義為flex-start時,彈性盒中的元素是從左開始排列的

 

 

 

綜上所述:當justify-content屬性為flex-end時,項目沿着主軸結束方向對齊

 

3.center
伸縮元素向每行中點排列。每行第一個元素到行首的距離將與每行最后一個元素到行尾的距離相同。

 

綜上所述:當justify-content屬性為center時,項目沿着主軸方向居中對齊

 

4.space-between
在每行上均勻分配彈性元素。相鄰元素間距離相同。每行第一個元素與行首對齊,每行最后一個元素與行尾對齊。

綜上所述:當justify-content屬性為space-between時,其對齊方式是兩端對齊的,項目之間間隔都相等

 

5.space-around
在每行上均勻分配彈性元素。相鄰元素間距離相同。每行第一個元素到行首的距離和每行最后一個元素到行尾的距離將會是相鄰元素之間距離的一半。

 

綜上所述:當justify-content屬性為space-around時,每一個項目兩側的間隔相等,項目之間間隔是項目與邊框間隔的兩倍。


免責聲明!

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



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