CSS盒子模型是網(wǎng)頁設(shè)計過程中的重要組成部分，它可以幫助我們控制HTML元素的大小、位置和邊框等方面。當(dāng)HTML元素排列在一行中超出了容器的寬度時，我們需要使用盒子優(yōu)雅的換行排列來實現(xiàn)良好的頁面效果。

.example {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}

上述代碼中，我們使用了CSS3的flexbox布局，它提供了強大的排列和對齊功能。其中，display: flex;表示將元素的布局方式設(shè)置為flexbox；flex-wrap: wrap;表示啟用自動換行；justify-content: space-between;表示在容器中沿主軸上均勻地分布元素；align-items: center;表示在容器中沿交叉軸上對齊各元素。

使用盒子優(yōu)雅的換行排列可以避免頁面排版混亂，增強用戶體驗。我們可以通過以上代碼控制元素的位置、大小和對齊方式，實現(xiàn)更加優(yōu)美的頁面效果。