使列表成为响应式设计

Question

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

问题：
不知道怎么解决。

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

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>

Answer 1

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

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

使列表成为响应式设计

Make the List to be responsive design

html

javascript

css

responsive-design