CSS-如何使用“ flex-flow:列换行”?

精简版

使用<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>JS Bin</title> </head> <body> <div id="flex"> <p>f</p> <!-- add extra "<p>foo</p>" here. --> </div> </body> </html>display: inline-flex时,它不会像2987040555361895895426那样收缩包装:

enter image description here

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />
  <title>JS Bin</title>
</head>
<body>
  <div id="flex">
    <p>f</p>
    <!-- add extra "<p>foo</p>" here. -->
  </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />
  <title>JS Bin</title>
</head>
<body>
  <div id="flex">
    <p>f</p>
    <!-- add extra "<p>foo</p>" here. -->
  </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />
  <title>JS Bin</title>
</head>
<body>
  <div id="flex">
    <p>f</p>
    <!-- add extra "<p>foo</p>" here. -->
  </div>
</body>
</html>

注意每个伸缩容器的大小如何变化(或不变化!)

我想要这种行为,因为我想将这些元素并排放置以进行水平滚动的网站。

为什么不收缩包装? 如何使它收缩包装?






原始问题

<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>JS Bin</title> </head> <body> <div id="flex"> <p>f</p> <!-- add extra "<p>foo</p>" here. --> </div> </body> </html>很简单,足以理解。 如果没有什么“弯曲”,则其行为类似于内联元素; 它会向右流动,直到无法再运行为止,这时它将形成新的一行。

<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>JS Bin</title> </head> <body> <div id="flex"> <p>f</p> <!-- add extra "<p>foo</p>" here. --> </div> </body> </html>display: inline-flex类似。 它向下流动,直到不再向下流动(2987040555361895895?),然后开始新的列。 当然,由于父级是display: flex,因此它是一个块级元素,由于align-content默认为stretch,因此该列将处于中间位置。我可以轻松地将其更改为2987040555361361895430,以使新列与上一个相邻。

...但是容器仍然太宽。 它仍然是一个块,并填充其父对象的宽度。

我需要flexbox缩小以适合其列。 为什么? 我正在尝试在水平滚动网站中使用flexbox。 当然,我可以让孩子们溢出,但是溢出往往会……破坏事物。所以我想我需要<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>JS Bin</title> </head> <body> <div id="flex"> <p>f</p> <!-- add extra "<p>foo</p>" here. --> </div> </body> </html>display: inline-flex。我希望有一种“从上到下,从左到右”的效果,其中父级没有空白空间。

...然后这件事发生了。 在chrome中,父级宽度等于子级宽度的总和,但否则,换行是正常的。 在firefox中,父级是全宽的,只是变得更高以适应元素(我不认为firefox支持包装)。 在IE11中,宽度是正确的,但是孩子们只是向下溢出(甚至从身体溢出)。

我很困惑。

我在这里做错了什么? 我了解flexbox是一项较新的功能,但与浏览器相比,这不能确定是我的错。

顺便说一下,我正在用chrome测试。 我只适合使用Chrome的解决方案。 (但是一个优雅的万能解决方案总是很好!)


这是我链接到的演示的代码,以防jsbin关闭:

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />
  <title>JS Bin</title>
</head>
<body>
  <div id="flex">
    <p>f</p>
    <!-- add extra "<p>foo</p>" here. -->
  </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />
  <title>JS Bin</title>
</head>
<body>
  <div id="flex">
    <p>f</p>
    <!-- add extra "<p>foo</p>" here. -->
  </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />
  <title>JS Bin</title>
</head>
<body>
  <div id="flex">
    <p>f</p>
    <!-- add extra "<p>foo</p>" here. -->
  </div>
</body>
</html>

uber5001 asked 2020-07-28T23:34:20Z
3个解决方案
5 votes

这确实是一个错误。 这里是链接到跟踪器:

[HTTPS://不告诉.chromium.org/怕/chromium/issues/detail?ID=247963][HTTPS://不告诉.chromium.org/怕/chromium/issues/detail?ID=507397]

如OP所愿:

我需要flexbox缩小以适合其列。 为什么? 我正在尝试在水平滚动网站中使用flexbox。 当然,我可以让孩子们溢出,但是溢出往往会……破坏事物。 所以我想我需要flex-flow:带显示的换行:inline-flex。 我希望有一种“从上到下,从左到右”的效果,其中父级没有空白空间。

我们可以简单地通过flex-flow: column wrap;align-content: flex-start;和固定高度的包装器来实现。

[HTTP://output.就是宾.com/气虚吸毒邪恶/1]

#flex {
  display: flex;
  flex-flow: column wrap;
  max-height: 100%;
  width: 150px;
  overflow: auto;
  align-content: flex-start;
}

p {
  margin: 0;
  align-self: flex-start
}

body {
  height: 150px;
}

更新的小提琴:[http://jsbin.com/qixuxiduxe/1/edit?html,css,js,console]

Asim K T answered 2020-07-28T23:35:06Z
2 votes

如果您不知道每件物品的高度或您将要拥有多少件物品,则可以使用以下更灵活的解决方案:

.parent {
  column-count: 4
}
.child {
  display: inline-block;
  width: 100%;
}

[HTTPS://developer.Mozilla.org/恩-US/docs/Web/CSS/column-count]

如果.child:first-childmargin-top不与顶部对齐,则可能需要对其进行调整。

Marcus answered 2020-07-28T23:35:35Z
0 votes

可能为时已晚,但我认为Firefox不完全支持'column-wrap'。 如您所说,您将需要在Chrome中使用它,在这种情况下,您可以看到Chris Coyier所做的事情:添加Webkit前缀-> [http://css-tricks.com/snippets/css/a-guide-to- flexbox /]

希望不迟于:/

Adrián. answered 2020-07-28T23:35:59Z
translate from https://stackoverflow.com:/questions/18669216/how-do-i-use-flex-flow-column-wrap