html - 在不向父级提供高度的情况下在 flex 列中排列元素

Question

嗨，我有这样的场景，我已经达到了一定的极限，但为此，我需要将高度提供给 UL，

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 120px;
}

li {
  height: 50px;
  width: 50px;
  background: red;
  margin-bottom: 10px;
  list-style: none;
  text-align: center;
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

我不想要，因为如果我的 ul 将有 13 个元素并且在那种情况下，我需要它们像这样排列。

元素的顺序对我来说并不重要，但要求是单行不超过 5 个元素，

如果它总共有 6 个元素，则需要上面 3 个和下面 3 个。因此，元素将像这样平均分配在行中。而这个条件已经达到了。

我也愿意使用网格。

Answer 1

我不确定这是否能达到目的，但这是我能想到的全部。

需要脚手架和一些时髦的计算来照顾边距并保持所有元素的大小相同。

如果你想去掉边距，别忘了调整计算

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


li {
  list-style: none;
}

.parent {
  display: flex;
}

.left {
  flex: 1 0 40%;
}

.right {
  flex: 1 0 60%;
}

.parent>li>ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.parent>li>ul>li {
  height: 50px;
  width: 50px;
  background: red;
  margin: 10px;
}

.left>ul>li {
  flex: 0 0 calc(50% - 20px);
}

.right>ul>li {
  flex: 1 0 calc(33.3% - 20px);
}

<ul class="parent">
  <li class="left">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </li>
  <li class="right">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </li>
</ul>

编辑现在我不明白元素的数量是如何变化的，所以这里的一切都是你的想法，以及如何实现这一目标的想法

这种方法使用的网格无论如何都不错，问题是最后一个元素必须跨越整个宽度。

现在这只会在我们有 13 个元素时起作用，所以当没有时你必须禁用它

ul {
  border: 1px solid;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(5, 1fr);
  margin: 30px;
}

li {
  height: 50px;
  width: 50px;
  background: red;
  border: 1px solid;
  list-style: none;
  text-align: center;
}

/* select before last item to push last item down */
ul>li:nth-last-child(2) {
  background: lime;
  grid-column: 2 /6;
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>