CSS盒分布是一種CSS技術，可以對網頁中的元素進行布局到不同的位置和大小。下面我們來看一些CSS盒分布的實例。

/* 將元素分布到頁面上下居中 */
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
/* 將元素分布到頁面左右居中 */
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
/* 將元素分布到頁面四周居中 */
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
height: 100vh;
}
/* 將元素沿著X軸自動放置到自動換行的視覺區域中 */
.container {
display: flex;
flex-wrap: wrap;
}
/* 讓元素按照指定的寬度自動換行 */
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex-basis: 25%;
min-height: 50px;
}
/* 創建一個響應式的網格 */
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 20px;
}
/* 將元素按照指定的比例放置 */
.container {
display: flex;
justify-content: space-between;
}
.item {
flex: 1 1 30%;
margin: 10px;
}
/* 沿著主軸分配空間 */
.container {
display: flex;
justify-content: space-between;
}
.item {
flex-grow: 1;
width: 100px;
height: 100px;
}

以上是一些常用的CSS盒分布實例，通過這些實例可以更好的掌握盒分布技術，提高網頁的布局效果。