如何使 flex-direction 行响应

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 项目 flex-wrap:wrap;属性

如何使 flex-direction 行响应

how to make flex-direction row responsive

css

mobile

flexbox

responsive