CSS布局是構建網頁的重要基礎，而根據寬度分配空間是其中的一個重要方面。在Web頁面中，當屏幕或瀏覽器窗口的寬度發生變化時，CSS樣式可以根據指定的設置，自動調整頁面中的各個元素的大小和位置，以適應不同的屏幕大小。

要實現根據寬度分配空間，我們可以使用CSS的彈性盒子布局（Flexbox），它是CSS3新添加的布局方式。在彈性盒子中，我們可以通過設置flex屬性來決定元素在布局中所占的比例。

假設我們有一個父元素（容器），里面有三個子元素。我們希望這三個子元素在不同的屏幕尺寸下，分別占據不同的寬度比例，實現響應式布局。代碼如下：

.container {
display: flex;
flex-direction: row; /* 設置主軸方向為水平 */
}
.item1 {
flex: 1; /* 占據1份空間，即1/3 */
}
.item2 {
flex: 2; /* 占據2份空間，即2/3 */
}
.item3 {
flex: 1; /* 占據1份空間，即1/3 */
}

在上述代碼中，我們首先將容器設置為彈性盒子布局，并將主軸方向設置為水平。然后分別設置子元素的flex屬性，使它們分別占據1份、2份和1份空間，實現在水平方向上的比例分配。在這種情況下，子元素的寬度比例為1:2:1。

總之，在Web頁面布局中，根據寬度分配空間是非常重要的。借助CSS的彈性盒子布局，我們可以很容易地實現響應式布局，讓頁面適應不同的屏幕尺寸，提升用戶的瀏覽體驗。