在弹性列中排列项目，但不向父级提供高度

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

为了删除ul元素的高度，请删除高度，然后在li上执行以下操作：

.ul {
height: 100px;
width: 250px;
background: red;
margin-bottom: 10px;
list-style: none;
text-align: center;
}

理想情况下，您应该在li元素上使用最大宽度和最小宽度。

通过使用此选项，您将遇到垂直li元素对齐的问题。要解决该问题，请使用空的li元素将最后一行的计数与上述行进行匹配，并将空li min-width设置为0；

那应该能够解决您的问题。希望能有所帮助！！！

Answer 2

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

需要脚手架和一些时髦的计算，以留意边距并使所有物品保持相同大小。

如果要删除边距，请不要忘记调整计算

* {
  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>

Answer 3

您可以使用grid通过定义5列1fr宽度的列来实现这一点，但是要显式设置列表项的宽度（在这种情况下为50px）：

ul {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 5px;
}

li {
  height: 50px;
  width: 50px;
  background: red;
  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>
  <li></li>
  <li></li>
  <li></li>
</ul>

Answer 4

您可以使用此代码

        body {
            margin: 0px;
        }
        .main {
            width: 1140px;
            margin: 0 auto;
        }
        ul {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            max-height: 120px;
            margin: 0;
            padding: 0;
        }
        li {
            height: 100px;
            width: 100px;
            background: red;
            margin-bottom: 10px;
            list-style: none;
            text-align: center;
            flex: 1 0 18%;
        }

    <div class="main">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
            <li>13</li>
        </ul>
    </div>