CSS3的Flex布局（Flexible Box）非常適合設(shè)計響應(yīng)式和靈活的布局。其中一個關(guān)鍵屬性是width，它定義了子項目在flex容器中的寬度。

.container {
display: flex;
}
.item {
width: 150px;
}

在上面的代碼中，我們將容器設(shè)置成flex布局，然后定義了一個子項目的寬度為150px。這意味著當(dāng)容器中有足夠的空間時，這個子項目將占據(jù)150px的寬度。如果沒有足夠的空間，這個子項目的寬度會自動縮小，以適應(yīng)容器的大小。

但是，如果我們想使子項目的寬度隨著容器的變化而變化，我們可以使用flex-grow屬性。這個屬性定義了一個子項目相對于其他子項目所占據(jù)的空間比例。

.item {
flex-grow: 1;
}

在上面的代碼中，我們將一個子項目的flex-grow屬性設(shè)置為1。這意味著當(dāng)容器有多余的空間時，這個子項目將填滿所有剩余的空間。

另外一個非常有用的屬性是flex-basis。它定義了一個子項目在沒有任何彈性溢出（flex overflow）時所占據(jù)的空間。

.item {
flex-basis: 100px;
}

在上面的代碼中，我們將一個子項目的flex-basis屬性設(shè)置為100px。這意味著無論子項目在容器中所占據(jù)的比例如何，它的寬度始終是100px。

CSS3的Flex布局是創(chuàng)建具有自適應(yīng)和響應(yīng)性的布局非常強(qiáng)大的工具。通過使用width、flex-grow和flex-basis屬性，我們可以創(chuàng)建靈活的布局，隨著不同設(shè)備和屏幕大小的變化而變化。