在前端開發(fā)中，盒子自動排序是一個常見的技術(shù)需求。CSS提供了多種方式來實現(xiàn)盒子自動排序，其中最常用的方式包括Flex布局和Grid布局。

/* Flex布局實現(xiàn)盒子自動排序 */
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.box {
width: 100px;
height: 100px;
margin: 10px;
}
/* Grid布局實現(xiàn)盒子自動排序 */
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-auto-rows: 100px;
grid-gap: 10px;
}
.box {
background-color: #eee;
}

如果使用Flex布局，需要給容器設(shè)置display: flex，并且設(shè)置flex-wrap: wrap來實現(xiàn)盒子的換行排列。此外，還可以通過設(shè)置justify-content屬性來控制盒子在容器中的水平位置。

如果使用Grid布局，則需要給容器設(shè)置display: grid，并且使用grid-template-columns屬性來設(shè)置盒子的列數(shù)、寬度和最小寬度。在這里，使用repeat(auto-fit, minmax(100px, 1fr))可以實現(xiàn)自動換行和自適應(yīng)寬度。此外，還可以使用grid-auto-rows屬性來設(shè)置盒子的高度。

綜上所述，CSS提供了多種方式來實現(xiàn)盒子自動排序。開發(fā)者可以根據(jù)具體需求選擇合適的布局方式。我們需要注意，F(xiàn)lex布局主要用于一維布局，而Grid布局主要用于二維布局，并且需要在較新的瀏覽器中使用。