flex 布局让ul 里面的li自适横向应布局每行只能有6个li 多出的去下一行

可以使用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元素的样式也被设置为有边框、居中显示和一定的内边距。