时间戳

首页 > 解决方案 > CSS - 弹性属性

html - CSS - 弹性属性

问题描述

嘿伙计们，我需要创建一个应该水平对齐的文本列表。挑战在于在不给出宽度或边距的情况下，每个 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>

标签： htmlcssflexbox

解决方案

对的，这是可能的。你必须使用flex-direction: row水平，flex-wrap: wrap如果需要，它会持续 2-3 行。

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

哦忘了..spacing你可以使用justify-content: space-between

推荐阅读