Flexbox - 可变列数问题答案

【问题标题】：Flexbox - Variable Number of Columns ProblemFlexbox - 可变列数问题
【发布时间】：2018-12-25 04:16:43
【问题描述】：

我正在尝试以响应式设计为目标，其中一长串链接按列排列，列数根据显示设备屏幕的宽度而变化。据我了解，我必须指定容器的高度才能获得多列。但是，这些列继续向右离开屏幕。我不知道链接的长度。有没有办法通过 Flexbox 做到这一点？这似乎是一个显而易见的要求。

我目前的 CSS 是：

/* Container */
.links {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 100vw !important; 
    height: 90vh;    
 }

/* Links in Container */
.links a {
    white-space: nowrap;
    flex: 1;
    margin: 5px 5px 0 20px;
}

编辑：这不是评论中的重复。问题不在于容器宽度没有水平增长。问题是它确实水平增长，而不是垂直增长。

【问题讨论】：

也许您需要证明您遇到的问题，以便我们了解为什么它不是重复的。目前，您对此无能为力。 固定高度 需要强制换行。如果没有，它就不会换行，你也不会得到你想要的列。这里可能需要 JS 解决方案。
如果您包含一个可以运行的代码 sn-p 以及预期内容的视觉效果，这可能会有所帮助，就像另一个问题一样。

标签： css flexbox css-multicolumn-layout

【解决方案1】：

您是否考虑过只使用CSS Columns？

您无需指定任何高度，然后随着屏幕宽度的变化，列数将根据您指定的宽度进行调整 - 相应地占用所需的任何高度。

你的 CSS 可能看起来像这样：

.links {
  columns: 5 100px; // # of columns | minimum column width
  column-gap: 40px; // space between columns
}

.links > a {
  display: block;
  padding: 10px 5px;
}

<div class="links">
  <a href="#">link1</a>
  <a href="#">link2</a>
  <a href="#">link3</a>
  <a href="#">link4</a>
  <a href="#">link5</a>
  <a href="#">link6</a>
  <a href="#">link7</a>
  <a href="#">link8</a>
  <a href="#">link9</a>
  <a href="#">link10</a>
  <a href="#">link11</a>
  <a href="#">link12</a>
  <a href="#">link13</a>
  <a href="#">link14</a>
  <a href="#">link15</a>
  <a href="#">link16</a>
  <a href="#">link17</a>
  <a href="#">link18</a>
  <a href="#">link19</a>
  <a href="#">link20</a>
</div>

Browser support 的专栏很不错。

希望这会有所帮助！

【讨论】：