如何实现容器中子元素三个三列布局，子元素两个则两列布局
更多描述 及容器中有三个及以上元素，则三列布局 容器只有两个元素，两列布局平分 容器只有一个元素，一列布局全占
Issue 欢迎在 Gtihub Issue 中回答此问题: Issue 486 (opens in a new tab)
Author 回答者: 9527YL (opens in a new tab)
css布局阔以使用flex，grid.
关健在于如何判断有多少元素。我们只需要判断有1个，有2个的情况，其他都是三列布局
/* 有1个元素 */
.item:nth-last-child(1):first-child {
flex: 1;
}
.item:nth-last-child(1):first-child ~ .item {
flex: 1;
}
/* 有2个元素 */
.item:nth-last-child(2):first-child {
flex: 1;
}
.item:nth-last-child(2):first-child ~ .item {
flex: 1;
}Author 回答者: Telanx (opens in a new tab)
反过来，前3个设置flex:1，超过3个就重置为none
/*前3个flex：1*/
.item:nth-child(-n + 3) {
flex: 1;
}
/*超过3个则none*/
.item:nth-last-child(4),
.item:nth-last-child(4) ~ .item {
flex: none;
}Author 回答者: Neisun (opens in a new tab)
grid和flex都可以实现，下边给出实现demo 根据子元素个数动态多列 (opens in a new tab)