使列表成为响应式设计答案

【问题标题】：Make the List to be responsive design使列表成为响应式设计
【发布时间】：2022-01-09 08:53:42
【问题描述】：

目标：
使列表（ul 及其 li）成为与屏幕宽度相关的响应式设计。

问题：
不知道怎么解决。

信息：
*您需要考虑每个 ul 列表中的 li 数量。不同的响应式设计取决于 ul 的宽度。
*每个 ul 可以是 1 到 10 li 或更多的随机数。

JSBin:
https://jsbin.com/xibalahave/edit?html,css,output

谢谢！

.aaa ul.listlist {
  margin: 10px 0 16px;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.aaa ul.listlist li {
  font-size: 1.125rem;
  display: block;
  margin-right: 24px;
  line-height: 22px;
  border-radius: 12px 12px 12px 12px;
  padding: 8px 24px;
  background-color: #00FFFF;
  white-space: nowrap;
}

<div class="aaa">
  <ul class="listlist">
    <li>1Test 1</li>
    <li>1Test 2</li>
    <li>1Test 3</li>
  </ul>
</div>
<br />
<div class="aaa">
  <ul class="listlist">
    <li>1Test 1</li>
    <li>1Test 2</li>
    <li>1Test 3</li>
    <li>1Test 4</li>
  </ul>
</div>
<br />
<div class="aaa">
  <ul class="listlist">
    <li>1Test 1</li>
    <li>1Test 2</li>
  </ul>
</div>

【问题讨论】：

您的意思有点不清楚，但请尝试在您的 ul 类中添加 flex-wrap: wrap，如果项目水平溢出页面，则它们会换行到下一行。

标签： javascript html css responsive-design

【解决方案1】：

您可以简单地将flexwrap: wrap; 添加到li 的容器中，它将允许子元素（此处为li）转到另一行。我邀请您了解 flexbox 及其所有属性，这对响应式设计非常有帮助！看看here。

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

【讨论】：