如何使弹性方向行响应

Question

我将这个 css 用于 a-z 列表

#a-z {
  float: left;
  width: 100%;
  margin-bottom: 25px;
  display: flex;
  flex-direction: row;
}
ul#a-z li {
  flex-grow: 1;
  padding: 7px;
  text-align: center;
  background: #282c39;
  color: #fff;
  text-transform: uppercase;
  border-left: 2px solid #1d1b24;
}

html

<ul id="a-z">
<li class="active" data-letter="#">#</li>
<li class="active" data-letter=a>a</li>
<li class="active" data-letter=b>b</li>
<li class="active" data-letter=c>c</li>
</ul>

我想让它响应并适应移动设备，是否有可能找到解决方案？提前致谢

Answer 1

如果你只显示了你的 HTML 的全部内容，但你可以在容器宽度不适合 flex 子项时使用 flex-wrap:wrap;属性