CSS盒子模型中的display屬性可以影響盒子的顯示方式,其中display:block可以將盒子顯示為塊級元素,而display:inline可以將盒子顯示為行內元素。除了這兩種方式,還有一種值為display:flex,可以將盒子顯示為彈性盒子。
對于display:flex方式,我們可以通過設置flex-direction屬性來決定盒子的方向,常用的有row(水平方向)和column(垂直方向)。通過align-items屬性來決定盒子內部元素在垂直方向上的對齊方式,常用的有flex-start(上對齊)、flex-end(下對齊)和center(居中對齊)。justify-content屬性則決定了盒子內部元素在水平方向上的對齊方式,常用的有flex-start(左對齊)、flex-end(右對齊)和center(居中對齊)。
.box { display: flex; flex-direction: column; align-items: center; justify-content: center; }
以上代碼可以將一個盒子顯示在頁面的中央位置,即使頁面大小發生變化,盒子也能隨著頁面一起居中展示。盒子內部的元素也能夠根據設定的對齊方式進行自適應調整。
上一篇css盒子模型實踐報告