Html 列表-垂直显示子列表项

很抱歉，我的问题措辞糟糕，我正在努力找到正确的提问方式

我在这个代码笔里有一个列表

标题
次级2


项目1


第2项小型


项目2类型大


项目3

Flex可以帮助您解决此问题，无需列表

.row{
显示器：flex；
弯曲方向：行；
宽度：100%；
身高：50%；
}
上校{
弹性：1；
填充：1em；
边框：1px实心#000；
}
.white bg{背景色：#fff；}
.GRY bg{背景色：#ccc；}
.深灰色背景{背景色：#aaa；}
.col-2{
弹性：100%；
边框：1px实心#000；
}
.集装箱{
宽度：300px；
}
.轮换{
-webkit变换：旋转（-90度）；
-moz变换：旋转（-90度）；
-ms变换：旋转（-90度）；
-o变换：旋转（-90度）；
变换：旋转（-90度）；
过滤器：progid:DXImageTransform.Microsoft.BasicImage（旋转=3）；
}

标题
项目1
项目2
小的
大的
项目3

这几乎解决了这个问题，但我如何才能在这样的项目上获得交替着色？使用第n个child（偶数）我得到了这个结果，我已经为我首选的方法更新了上面的代码片段。有些人可能会认为代码有点马虎，但这正是我喜欢做的。我只是想创建一个颜色类，然后将该类添加到需要bg-color的所需div中。遗憾的是，这个解决方案不适合我，因为我不知道在生成之前列表中会有多少元素。最后，我使用绝对定位放置了group元素，并坚持使用第n个child方法，但是由于您的方法总体上更好，所以我将其标记为答案。谢谢你的时间！很高兴你知道了。如果你能为将来偶然发现这一点的人发布你使用的代码，那就太好了