CSS3 Box布局是一種基于彈性框模型的布局方式，它允許我們通過簡單的屬性和值來實現(xiàn)靈活的頁面布局。它在前端開發(fā)中被廣泛應(yīng)用，這篇文章將介紹一些關(guān)于CSS3 Box布局的知識。

.display {
display: flex; /* 容器指定為 Flex 布局 */
}
.flex-item {
flex: 1; /* 子項元素占用空間的比例 */
}

CSS3 Box布局的核心是 flexbox 彈性盒子模型，它是一種用于頁面元素布局的新模型。使用 flexbox，我們可以輕松處理各種不同的布局需求，比如創(chuàng)建固定寬高的布局，自適應(yīng)布局，等分布局和垂直和水平居中等等。

下面是幾個常用的 flexbox 的屬性介紹：

.flexbox-container {
display: flex;
flex-direction: row; /* 主軸的方向為從左到右，跟文本排版方向一致 */
justify-content: center; /* 主軸方向上的元素居中對齊 */
align-items: center; /* 交叉軸方向上的元素居中對齊 */
}

其中，flex-direction屬性用來指定主軸的方向，有6個屬性：row（默認值，表示左到右），row-reverse（表示從右到左），column（從上到下），column-reverse（從下到上），flex-wrap（換行），nowrap（不換行）。

還有一個常用的屬性是flex，它使用flex-grow、flex-shrink和flex-basis三個屬性的縮寫，用于指定彈性元素的擴展、收縮以及初始尺寸。

.box {
flex: 1 1 100px;
 }

以上代碼的意思是彈性元素占據(jù)剩余空間，但它們也可以收縮，如果空間不足， 其基本大小為 100 像素。

總之，使用CSS3 Box布局，我們可以輕松布局不同的頁面布局需求，實現(xiàn)頁面的靈活性和響應(yīng)式布局，提高前端開發(fā)效率。