使用 Flex 布局实现 ul 里 li 自适应横向排列，每行 6 个

可以使用 Flex 布局的 'flex-wrap' 属性来实现这个效果。将 ul 设置为 Flex 容器，设置 'flex-wrap' 为 'wrap'，即可使 li 自适应横向排列，并自动换行。同时，设置每个 li 的宽度为 16.66%，即可保证每行只有 6 个 li。

HTML 代码：

<ul class='flex-container'>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
</ul>

CSS 代码：

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-container li {
  width: 16.66%;
  box-sizing: border-box;
  border: 1px solid #ccc;
  text-align: center;
  padding: 10px;
}

在上面的例子中，每个 li 元素的宽度被设置为 16.66%，即一行最多可以容纳 6 个 li 元素。如果有多余的 li 元素，它们会自动换行到下一行。每个 li 元素的样式也被设置为有边框、居中显示和一定的内边距。