本文介紹了CSS3彈性盒模型，供大家參考，大家亦可以結合CSS3彈性盒模型開發筆記（一）、CSS3彈性盒模型開發筆記（二）進行學習，具體內容如下

box-pack和box-align屬性

當彈性元素和非彈性元素混合排版時，有可能會出現所有子元素的尺寸大小或小于盒子的尺寸，從而出現盒子空間不足或者富余的情況，這時就需要一種方法來管理盒子的空間。如果子元素的總尺寸小于盒子的尺寸，則可以使用box-align和box-pack屬性進行管理。

box-pack屬性可以在水平方向上對盒子的富余空間進行管理，該屬性的基本語法如下：

box-pack：start | end | center | justify

取值說明：

start：所有子元素都顯示在盒子的左側，富余的空間顯示在盒子的右側。

end：所有子元素都顯示在盒子的右側，富余的空間顯示在盒子的左側。

justify：富裕的空間在子元素之間平均分配。在第一個子元素之前和最后一個子元素之后不分配空間。

center：富余的空間在盒子的兩側平均分配。

  box-align屬性可以在垂直方向上對盒子的富余空間進行管理，該屬性的基本語法如下：

box-align：start | end | center | baseline | stretch

取值說明：

start：所有子元素沿著盒子的上邊緣排列，都顯示在盒子的上部，富余的空間顯示在盒子的底部。

end：所有子元素沿著盒子的下邊緣排列，都顯示在盒子的底部，富裕的空間顯示在盒子的上部。

center：富余的空間在盒子的上下兩側平均分配，即上面一半，下面一半。

baseline：所有盒子沿著它們的基線排列，富余的空間可前可后顯示。

stretch：每個子元素的高度被調整到適合盒子的高度顯示。

實戰體驗：自適應布局居中設計

HTML代碼：

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表