首页 文章

没有指定高度的CSS Flex列布局

提问于
浏览 次
13

刚刚发现今天的flex，我希望它能解决一个小的视觉挑战 .

我有一个按字母顺序排序的项目列表 . 它们都具有相同的宽度，到目前为止，我已将它们向左浮动 . 当水平空间用完时，这会导致从左到右的顺序 .

我希望做的是使用可用宽度尽可能多的列进行自上而下的排序 . 看到此列表是动态的，高度将是可变的 . 并且当水平空间丢失（调整大小）时，高度必须增加，以防止尽可能多的列 .

鉴于flex试图完成的明显性质，我认为这将得到支持，但到目前为止，我无法弄明白 . “display：flex”和“flex-flow：column wrap”似乎是正确的，但它需要一个特定的高度才能工作，这是我无法提供的 .

我错过了什么吗？

编辑：我在这里创建了一个JSFiddle：https://jsfiddle.net/7ae3xz2x/

ul {
    display: flex;
    flex-flow: column wrap;
    height: 100px;
}
ul li {
    width: 150px;
    list-style-type: none;
    border: 1px solid black;
    text-align: center;
}

如果你从ul上取下高度，没有任何东西包裹 .

似乎概念问题是“列”流程都与容器的高度相关而不是宽度，这就是我想要的 . 我不在乎该地区有多高 . 我关心的是在可用宽度上尽可能多的列 . 也许这只是flex惯例的一个恼人的缺点 .

css multiple-columns flexbox

2 回答

  • 1

    这似乎是CSS专栏的一项工作：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns

    而不是flex，给ul一个 column-width CSS规则：

    ul {
  column-width: 150px;
}

    Here's a JSFiddle.

    回复于
  • -1

    我正在寻找'm not sure if this is what you'，但您可能需要将 flex-flow: column wrap: 更改为 flex-flow: row wrap; 并将高度和宽度更改为100vh和100vw

    ul {
  display: flex;
  flex-direction: column;
  flex-flow: row wrap;
  height: 100vh;
  width: 100vw;
}

    所以现在列表项保持相同的宽度，并根据视图宽度的大小调整高度 . Updated Fiddle

    回复于

相关问题