html - CSS - flex 属性

Question

大家好，我需要创建一个水平对齐的文本列表。挑战在于没有给出宽度或边距，每个 li 的间隙应该相同。它应该是响应式的。也就是说，在某些分辨率下，如果所有的 li 不能保持水平，它应该自动分解并下降。这可能使用 flex 吗？

ul {
  max-width: 500px;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  margin: inherit;
}

ul li {
  display: block;
  flex: 0 1 auto;
  float: none;
  margin-top: 0;
  width: auto;
  list-style-type: none;
  padding: 0;
}

<ul>
  <li> We identify unmet user </li>
  <li> We identify unmet </li>
  <li> We identify </li>
  <li> We identify unmet </li>
</ul>

Answer 1

是的，这是可能的。您必须对水平方向使用 flex-direction: row 并使用 flex-wrap: wrap 并在需要时使用 2-3 行。

如果你想要 flex-direction: column - vertical - 在较小的屏幕上只需使用 @media only screen and (max-width: 600px) - max -width 或 min-width 取决于您的需要。

哦忘了 .. 对于相等的 spacing 你可以使用 justify-content: space-between