css li 多行多列

当我们使用CSS中的li属性时，经常会遇到多行多列的情况。在这种情况下，我们需要使用一些CSS技巧来实现我们想要的样式。

ul {
  columns: 3;
  -webkit-columns: 3;
  -moz-columns: 3;
}

li {
  display: inline-block;
  width: 100%;
  margin-bottom: 10px;
}

以上代码将把ul元素分成三列，并将每个li元素设置为内联块级元素，以便在同一行中对其进行排列。此外，每个li元素的宽度设置为100%，以便填充整个列。

但是，如果我们希望li元素按行排列呢？在这种情况下，我们需要使用另一种方法。

ul {
  display: flex;
  flex-wrap: wrap;
}

li {
  flex: 1 0 30%;
  margin-right: 10px;
  margin-bottom: 10px;
}

以上代码说明将ul元素设置为Flexbox容器，并将其包装设置为wrap，以便在需要时将li元素移到下一行。使用Flexbox还可以更灵活地控制每个li元素的大小和间距。

在实际使用CSS li属性时，我们应该根据具体情况选择合适的方法，以实现我们想要的多行多列效果。