CSS3是一種用于網(wǎng)頁設(shè)計的語言，它允許網(wǎng)站設(shè)計師使用更多的樣式和特效來創(chuàng)建更豐富多彩的網(wǎng)頁。其中，F(xiàn)lex是一種用于布局的彈性盒模型，可以幫助網(wǎng)站設(shè)計師實現(xiàn)更加靈活的布局。

在Flex布局中，我們經(jīng)常需要設(shè)置元素的寬高比，以適應(yīng)不同的設(shè)備和屏幕大小。使用CSS3中的flex寬高比，可以輕松地實現(xiàn)這一目標(biāo)。

.box {
display: flex; /* 聲明彈性盒模型 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
.item {
flex: 1; /* 元素平分剩余空間 */
padding: 20px;
background-color: #2196F3;
color: #fff;
}
.item:first-child {
flex: 2; /* 元素占用剩余空間的2/3 */
}
.item:last-child {
flex: 1; /* 元素占用剩余空間的1/3 */
}

在上面的代碼中，我們首先聲明一個彈性盒模型，然后將其內(nèi)部的元素（item）平分剩余空間，并設(shè)置了第一個元素占用2/3的空間，最后一個元素占用1/3的空間。

這樣一來，我們的布局就可以根據(jù)不同的屏幕大小和設(shè)備，自動地調(diào)整元素的大小和位置，維持了一個良好的寬高比例。

總之，在CSS3中使用flex寬高比，可以讓我們的網(wǎng)頁設(shè)計更加具有靈活性和美觀性，深得網(wǎng)站設(shè)計師們的青睞。