不设置高度的弹性列？

Question

我正在尝试使用简单无序列表的现有标记创建一个简单的大型菜单，而不更改标记。

一些要求...

宽度是固定的（在我的例子中是 100% 从左到右跨越）并且不能溢出
高度可以根据项目的数量而变化，但最好尽可能小，这样我们就不会只有一列包含大量项目
由于客户的设计限制，第一个 LI 元素需要 100% 高度（基本上第一个 LI 将在第一列中突出显示 link，其余项目是导航的其余部分在列中垂直列出的项目。

这是总体布局的快速简化模型...

现在我已经能够使用 flex 完成其中的大部分工作，但是我必须在整个容器开始包装成列之前设置一个高度，然后运行进入溢出问题如果内容较大，则向右。这是一个简化的例子...

.megamenu {
  background-color: #ccc;
  list-style-type: none;
  margin: 0;
  padding: 0.6em;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 210px;
}

.megamenu .item {
  padding: 0.2em 0.4em;
}

.megamenu .item:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: #FAEAD6;
}

<ul class="megamenu">
  <li class="item"><a href="#">Item 1</a></li>
  <li class="item"><a href="#">Item 2</a></li>
  <li class="item"><a href="#">Item 3 with an extra long string of text for testing purposes</a></li>
  <li class="item"><a href="#">Item 4</a></li>
  <li class="item"><a href="#">Item 5</a></li>
  <li class="item"><a href="#">Item 6</a></li>
  <li class="item"><a href="#">Item 7</a></li>
  <li class="item"><a href="#">Item 8</a></li>
  <li class="item"><a href="#">Item 9</a></li>
  <li class="item"><a href="#">Item 10</a></li>
  <li class="item"><a href="#">Item 11</a></li>
  <li class="item"><a href="#">Item 12 Quam Nibh Cursus Ornare Adipiscing</a></li>
  <li class="item"><a href="#">Item 13</a></li>
  <li class="item"><a href="#">Item 14</a></li>
  <li class="item"><a href="#">Item 15</a></li>
  <li class="item"><a href="#">Item 16</a></li>
  <li class="item"><a href="#">Item 17</a></li>
  <li class="item"><a href="#">Item 18</a></li>
  <li class="item"><a href="#">Item 19</a></li>
  <li class="item"><a href="#">Item 20</a></li>
  <li class="item"><a href="#">Item 21</a></li>
  <li class="item"><a href="#">Item 22</a></li>
  <li class="item"><a href="#">Item 23</a></li>
  <li class="item"><a href="#">Item 24 Amet Tellus Lorem Ligula Euismod</a></li>
  <li class="item"><a href="#">Item 25</a></li>
  <li class="item"><a href="#">Item 26</a></li>
  <li class="item"><a href="#">Item 27</a></li>
  <li class="item"><a href="#">Item 28 Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</a></li>
  <li class="item"><a href="#">Item 29</a></li>
  <li class="item"><a href="#">Item 30</a></li>
</ul>

我不完全确定是否可以使用 flex 来完成此操作，但我尝试过使用网格和普通的旧列，但都效果不佳。

Answer 1

遗憾的是，Flexbox 行应该具有固定大小。

Flexbox is not meant to recreate Masonry with pure CSS: items in one row cannot occupy space allocated for a preceding/following row (same goes for columns if you're using column orientation). You can use align-items to prevent them from stretching, but that's about it

尝试：

.megamenu {
  background-color: #ccc;
  list-style-type: none;
  margin: 0;
  padding: 0.6em;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 210px;
}

.megamenu .item {
  padding: 0.2em 0.4em;
}

.megamenu .item:first-child {
  display: flex;
  align-items:flex-start;
  justify-content: center;
  height: 100%;
  background-color: #FAEAD6;
}

或者您可以尝试列方向或多列模块（请参阅此 SO 答案：）

Answer 2

我确实找到了 display: grid; 的解决方案。我不知道你希望有多少列，但你可以将其固定到 grid-template-columns.

在您的容器中设置以下代码：

  display: grid;
  grid-template-columns: repeat(4, minmax(100px, 1fr));
  grid-template-rows: auto [last-line];

在您的第一个项目集中，第一个项目将跨越：

/* This make the trick */
  grid-row: 1 / span last-line;
  grid-row-start: span 9000;

功劳属于此。如果您认为我的回答重复，请删除您的问题。

.megamenu {
  background-color: #ccc;
  list-style-type: none;
  margin: 0;
  padding: 0.6em;
  display: grid;
  grid-template-columns: repeat(4, minmax(100px, 1fr));
  grid-template-rows: auto [last-line];
}

.megamenu .item {
  padding: 0.2em 0.4em;
}

.megamenu .item:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FAEAD6;
  /* This make the trick */
  grid-row: 1 / span last-line;
  grid-row-start: span 9000;
}

<ul class="megamenu">
  <li class="item"><a href="#">Item 1</a></li>
  <li class="item"><a href="#">Item 2</a></li>
  <li class="item"><a href="#">Item 3 with an extra long string of text for testing purposes</a></li>
  <li class="item"><a href="#">Item 4</a></li>
  <li class="item"><a href="#">Item 5</a></li>
  <li class="item"><a href="#">Item 6</a></li>
  <li class="item"><a href="#">Item 7</a></li>
  <li class="item"><a href="#">Item 8</a></li>
  <li class="item"><a href="#">Item 9</a></li>
  <li class="item"><a href="#">Item 10</a></li>
  <li class="item"><a href="#">Item 11</a></li>
  <li class="item"><a href="#">Item 12 Quam Nibh Cursus Ornare Adipiscing</a></li>
  <li class="item"><a href="#">Item 13</a></li>
  <li class="item"><a href="#">Item 14</a></li>
  <li class="item"><a href="#">Item 15</a></li>
  <li class="item"><a href="#">Item 16</a></li>
  <li class="item"><a href="#">Item 17</a></li>
  <li class="item"><a href="#">Item 18</a></li>
  <li class="item"><a href="#">Item 19</a></li>
  <li class="item"><a href="#">Item 20</a></li>
  <li class="item"><a href="#">Item 21</a></li>
  <li class="item"><a href="#">Item 22</a></li>
  <li class="item"><a href="#">Item 23</a></li>
  <li class="item"><a href="#">Item 24 Amet Tellus Lorem Ligula Euismod</a></li>
  <li class="item"><a href="#">Item 25</a></li>
  <li class="item"><a href="#">Item 26</a></li>
  <li class="item"><a href="#">Item 27</a></li>
  <li class="item"><a href="#">Item 28 Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</a></li>
  <li class="item"><a href="#">Item 29</a></li>
  <li class="item"><a href="#">Item 30</a></li>
</ul>

Answer 3

我假设列数是预先确定的。最简单的解决方案是使用 CSS column layout。第一项——需要特殊处理——可以定位。

以下示例使用 3 列。我已经标记了需要为任何其他数量的列更改的规则。

body {
  font-family: sans-serif;
}
.megamenu {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.megamenu .item {
  padding: .25em .5em;
  border-radius: .5em;
  background-color: #9BA;
}
/* column setup */
.megamenu {
  margin-left: 33.3333%; /* 3 cols => 1/3, 4 cols => 1/4 */
  column-count: 2; /* 3 cols => 2, 4 cols => 3 */
  column-gap: 0;
  position: relative;
}
.megamenu .item {
  break-inside: avoid; /* don't split border/padding/etc across columns */
}

.megamenu .item:first-child {
  position: absolute;
  left: -50%; /* 3 cols => -1/2, 4 cols => -1/3 */
  right: 100%;
  top: 0;
  bottom: 0;
  background-color: #FDD;
}

<ul class="megamenu">
  <li class="item"><a href="#">Item 1</a></li>
  <li class="item"><a href="#">Item 2</a></li>
  <li class="item"><a href="#">Item 3 with an extra long string of text for testing purposes</a></li>
  <li class="item"><a href="#">Item 4</a></li>
  <li class="item"><a href="#">Item 5</a></li>
  <li class="item"><a href="#">Item 6</a></li>
  <li class="item"><a href="#">Item 7</a></li>
  <li class="item"><a href="#">Item 8</a></li>
  <li class="item"><a href="#">Item 9</a></li>
  <li class="item"><a href="#">Item 10</a></li>
  <li class="item"><a href="#">Item 11</a></li>
  <li class="item"><a href="#">Item 12 Quam Nibh Cursus Ornare Adipiscing</a></li>
  <li class="item"><a href="#">Item 13</a></li>
  <li class="item"><a href="#">Item 14</a></li>
  <li class="item"><a href="#">Item 15</a></li>
  <li class="item"><a href="#">Item 16</a></li>
  <li class="item"><a href="#">Item 17</a></li>
  <li class="item"><a href="#">Item 18</a></li>
  <li class="item"><a href="#">Item 19</a></li>
  <li class="item"><a href="#">Item 20</a></li>
  <li class="item"><a href="#">Item 21</a></li>
  <li class="item"><a href="#">Item 22</a></li>
  <li class="item"><a href="#">Item 23</a></li>
  <li class="item"><a href="#">Item 24 Amet Tellus Lorem Ligula Euismod</a></li>
  <li class="item"><a href="#">Item 25</a></li>
  <li class="item"><a href="#">Item 26</a></li>
  <li class="item"><a href="#">Item 27</a></li>
  <li class="item"><a href="#">Item 28 Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</a></li>
  <li class="item"><a href="#">Item 29</a></li>
  <li class="item"><a href="#">Item 30</a></li>
</ul>

不设置高度的弹性列？

Flex columns without setting height?

html

css

multiple-columns

flexbox