本文目錄導(dǎo)讀：

1. 創(chuàng)建伸縮盒子
2. 設(shè)置盒子寬度
3. 調(diào)整盒子寬度
4. 響應(yīng)式布局

伸縮盒子CSS3寬度設(shè)置詳解

在CSS3中，我們可以使用flex屬性來創(chuàng)建一個伸縮盒子，并根據(jù)需要調(diào)整其寬度，下面我們將詳細(xì)介紹如何設(shè)置伸縮盒子的寬度。

創(chuàng)建伸縮盒子

我們需要創(chuàng)建一個伸縮盒子，可以通過將display屬性設(shè)置為flex來實現(xiàn)：

.box {
  display: flex;
}

設(shè)置盒子寬度

我們可以設(shè)置盒子的寬度，在伸縮盒子中，盒子的寬度可以通過flex-basis屬性來設(shè)置：

.box {
  display: flex;
  flex-basis: 200px;
}

上述代碼將盒子的寬度設(shè)置為200像素，你可以根據(jù)需要調(diào)整這個值。

調(diào)整盒子寬度

除了設(shè)置固定的寬度外，我們還可以根據(jù)需要動態(tài)調(diào)整盒子的寬度，這可以通過使用百分比或vw（視口寬度）單位來實現(xiàn)：

.box {
  display: flex;
  flex-basis: 50%; /* 寬度為視口寬度的50% */
}

這樣，盒子的寬度就會根據(jù)視口寬度動態(tài)調(diào)整。

響應(yīng)式布局

在響應(yīng)式布局中，我們通常會希望盒子的寬度能夠適應(yīng)不同設(shè)備上的視口寬度，這時，我們可以使用媒體查詢（Media Queries）來設(shè)置不同視口寬度下的盒子寬度：

.box {
  display: flex;
  flex-basis: 100%; /* 在小屏幕上，寬度為100% */
}
@media (min-width: 600px) {
  .box {
    flex-basis: 50%; /* 在中等屏幕上，寬度為50% */
  }
}
@media (min-width: 900px) {
  .box {
    flex-basis: 33.33%; /* 在大屏幕上，寬度為33.33% */
  }
}

這樣，盒子的寬度就可以根據(jù)視口寬度和設(shè)備類型進(jìn)行響應(yīng)式調(diào)整。