最近，我在開發(fā)一家電商網(wǎng)站時(shí)，遇到了一個(gè)CSS布局的問(wèn)題。該網(wǎng)站需要在首頁(yè)上展示不同類別的商品，但我無(wú)法使它們?cè)谕恍兄袑?duì)齊。經(jīng)過(guò)一番研究，我終于解決了這個(gè)問(wèn)題，下面我將分享我的解決方案。

.category {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.item {
flex: 1;
margin: 0 10px;
}

在上面的代碼中，我們首先將類別容器(.category)設(shè)置為彈性布局(flex)，使其子項(xiàng)可以沿主軸方向?qū)R。然后，我們使用flex-wrap屬性將其子項(xiàng)包裹在多行中。接下來(lái)，我們使用justify-content屬性將其子項(xiàng)在水平方向上分別分配到容器中，以避免它們重疊在一起。最后，我們使用align-items屬性將所有子項(xiàng)垂直居中對(duì)齊。

針對(duì)每個(gè)單獨(dú)的商品（.item），我們使用flex屬性將其寬度均分為三份（1/3），并將其間距設(shè)置為10像素。

這樣，我們得到了在同一行中對(duì)齊的商品類別。這種布局適用于在電商網(wǎng)站上展示多個(gè)子項(xiàng)的情況，使其能夠自適應(yīng)寬度，并保持良好的外觀。