CSS3 Flexbox 是一種強(qiáng)大的布局方式，同時(shí)也支持添加滾動(dòng)條。使用 Flexbox 創(chuàng)建包含滾動(dòng)條的容器，可以更加簡(jiǎn)便地實(shí)現(xiàn)布局需求。

首先，我們需要為容器設(shè)置display: flex;屬性，例如：

.container {
display: flex;
}

接著，添加flex-direction屬性以指定主軸方向。在這個(gè)示例中，我們將以水平方向?yàn)橹鬏S：

.container {
display: flex;
flex-direction: row;
}

接下來(lái)，我們添加適當(dāng)?shù)膶挾群透叨葋?lái)定義容器的大小，以及添加overflow: auto;屬性來(lái)啟用滾動(dòng)條：

.container {
display: flex;
flex-direction: row;
width: 500px;
height: 300px;
overflow: auto;
}

這樣，我們就可以在容器中添加任意數(shù)量的子元素并且自動(dòng)創(chuàng)建滾動(dòng)條。

注意，在使用 Flexbox 布局時(shí)，子元素需要顯示指定flex-grow屬性以填充容器。例如，這里創(chuàng)建了兩個(gè)子元素，并用flex-grow: 1;指定它們平均填充。

.container {
display: flex;
flex-direction: row;
width: 500px;
height: 300px;
overflow: auto;
}
.child {
flex-grow: 1;
}

這樣，在更改容器大小時(shí)，子元素的大小也會(huì)自動(dòng)調(diào)整。

總之，使用 CSS3 Flexbox 以及適當(dāng)?shù)膶傩院椭担涂梢詾槿萜鲗?shí)現(xiàn)簡(jiǎn)便的滾動(dòng)條。現(xiàn)在，你可以使用這種方式為你的網(wǎng)站添加具有響應(yīng)性的布局。