css - 我如何使用 "flex-flow: column wrap"？

转载作者：数据小太阳更新时间：2023-10-29 09:12:20

26

4

精简版

当使用 flex-flow: column wrap 和 display: inline-flex 时，它不会像 inline-block 那样 shrinkwrap:

(function() {
  var ascending = true;
  setInterval(function() {
    var parent = document.getElementById('flex');
    if (ascending) {
      var child = document.createElement('p');
      child.innerHTML = "foo";
      parent.appendChild(child);
    } else {
      parent.removeChild(parent.children[0]);
    }
    if (parent.children.length <= 1) ascending = true;
    if (parent.children.length >= 40) ascending = false;
  }, 20);
})();
(function() {
  var ascending = true;
  setInterval(function() {
    var parent = document.getElementById('failex');
    if (ascending) {
      var child = document.createElement('p');
      child.innerHTML = "foo";
      parent.appendChild(child);
    } else {
      parent.removeChild(parent.children[0]);
    }
    if (parent.children.length <= 1) ascending = true;
    if (parent.children.length >= 40) ascending = false;
  }, 20);
})();

#flexdesc {position: absolute; top: 25px;}
#flex {
  top: 50px;
  position: absolute;
  display: inline-flex;
  flex-flow: row wrap;
  outline: 1px solid black;
  padding: 3px;
  max-height: 100%;
  max-width: 180px;
  align-content: flex-start;
  transform: matrix(0, 1, 1, 0, 0, 0);
  transform-origin: top left;
}

#flex > p {
  margin: 0;
  outline: 1px solid black;
  height: 30px;
  width: 30px;
  align-self: flex-start;
  transform: matrix(0, 1, 1, 0, 0, 0);
}
#failexdesc {position: absolute; top: 275px;}
#failex {
  top: 300px;
  position: absolute;
  display: flex;
  flex-flow: column wrap;
  outline: 1px solid black;
  padding: 3px;
  max-height: 200px;
  align-content: flex-start;
  transform-origin: top left;
}

#failex > p {
  margin: 0;
  outline: 1px solid black;
  height: 30px;
  width: 30px;
  align-self: flex-start;
}

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="flexdesc">What I expect it to do</div>
  <div id="flex">
    <p>foo</p>
    
    <!-- add extra "<p>foo</p>" here. -->
  </div>
  <div id="failexdesc">What it does</div>
  <div id="failex">
    <p>foo</p>
  </div>
</body>
</html>

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

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

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

原始问题

flex-flow: row wrap 非常简单易懂。如果没有什么是“flexing”，它的行为类似于内联元素；它向右流动，直到它不能再流动为止，此时它会形成一个新行。

flex-flow: column wrap 与 display: flex 类似。它向下流动，直到它不能再向下流动(max-width？)，然后开始一个新的列。当然，由于父元素是 display: flex，它是一个 block 级元素，因此由于 align-content 默认为 拉伸(stretch)。我可以轻松地将其更改为 flex-start 以使新列与前一列相邻。

...但是容器还是太宽了。它仍然是一个 block ，并填充了它父级的宽度。

我需要 flexbox 收缩以适应它的列。为什么？我正在尝试在水平滚动的网站中使用 flexbox。当然，我可以让 children 溢出，但溢出往往会……破坏东西。所以我想我需要 flex-flow: column wrap 和 display: inline-flex。我希望有一个“从上到下，从左到右”的效果，父级没有空白空间。

...然后 this发生了。在 chrome 中，父宽度等于子宽度的总和，否则，换行是正常的。在 firefox 中，父级是全宽的，只是长得更高以容纳元素(我认为 firefox 不支持换行)。在 IE11 中，宽度是正确的，但 child 只是向下溢出(甚至超出 body )。

我很困惑。

我在这里做错了什么？我知道 flexbox 是一个更新的功能，但我无法判断这是我的错还是浏览器的错。

顺便说一下，我正在用 chrome 测试这个。仅限 chrome 的解决方案对我来说很好。 (但是一个优雅的包罗万象的解决方案总是好的!)

这是 the code for the demo I linked to ，以防 jsbin 宕机:

var ascending = true;
   setInterval(function() {
     var parent = document.getElementById('flex');
     if (ascending) {
       var child = document.createElement('p');
       child.innerHTML = "f";
       parent.appendChild(child);
     } else {
       parent.removeChild(parent.children[0]);
     }
     if (parent.children.length <= 1) ascending = true;
     if (parent.children.length >= 30) ascending = false;
   }, 200);

#flex {
  display: inline-flex;
  flex-flow: column wrap;
  outline: 1px solid black;
  padding: 3px;
  max-height: 100%;
  align-content: flex-start;
}
p {
  margin: 0;
  outline: 1px solid black;
  width: 10px;
}
body {
  height: 150px;
  width: 300px;
  outline: 1px dashed black
}

<!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>

最佳答案

如果您不知道每个元素的高度或您将拥有多少元素，一个更灵活的解决方案是:

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

https://developer.mozilla.org/en-US/docs/Web/CSS/column-count

如果 .child:first-child 没有与顶部对齐，您可能还需要调整 margin-top。

关于css - 我如何使用 "flex-flow: column wrap"？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18669216/

26

4

0

文章推荐： css - 使用 CSS 在 div 背景中绘制对 Angular 线

文章推荐： html - 如何更改 anchor 标记内 title 属性的样式？

文章推荐： css - 使用百分比作为字体大小？

文章推荐： css - 显示通过 Chrome 开发者工具所做的所有更改

html - flex 盒/IE11 : flex-wrap: wrap does not wrap (Images + Codepen inside)
我创建了一个包含社交图标的列表。这些图标应该环绕在小屏幕上。我使用 flex-wrap: wrap; 它在 Firefox 和 Chrome 中完美运行: 但是 Internet Explorer
css - 哪些字符允许空格 : pre-wrap to wrap?
我很惊讶地发现我的 white-space: pre-wrap;文本在 > 换行和 "人物。我以为它只会换行，- , 以及一个或多个空格之后。这是一个fiddle . 它在" 之后换行, 在
html - flex-wrap:wrap;不能让他们工作
我被分配了重新创建以下网站的任务：https://plantanapp.com/learn 我做了一些事情，但是每次我解决一个问题时，都会出现另外两个问题。我是HTML和CSS的新手，并不真正了解元
javascript - jQuery wrap 函数 wrap 工作起来很奇怪
我偶然发现了 jQuery 的 wrap() 函数。当我试图包装两个 div 标签时，它们之间有一些文本，而不是两个 div 之间没有文本时，它的行为不知何故不同。 j查询: var wrapper
CSS Validator 无法识别 flex-wrap : wrap;
我正在尝试在 w3c css 验证器上验证一个 css 文件。当它被测试时，它返回一个错误，指出 “属性 flex-wrap- 不存在:wrap”。这是我 css 验证器认为错误的部分。 .row {
javascript - 如何使用 flex-wrap : wrap 去除行与行之间的空间
这个问题在这里已经有了答案: Flex items create space between them when they wrap [duplicate] (1 个回答) 关闭 6 年前。我正在
html - 你如何告诉浏览器 "if you need to wrap, wrap here first"？
我正在制作一个网页，其中的标题有一个主要主题和一个描述符，每个都包含在标签中。我已经查找了标签，它似乎只在你有长字符串时才有效没有空格。但是我在文本中断断续续地有空格。我需要的是我可以在两个元
wpf - WPF Wrap 面板以何种方式较慢，我们需要虚拟 wrap 面板
我听到很多关于 wrap 面板加载速度较慢的消息，因此我们需要一个虚拟化面板。有人可以给我一个小的环绕面板示例，它可以证明加载速度较慢等它需要一个虚拟面板。我设置了一个环绕面板作为列表框的面板控件
javascript - 类型错误 : Attempted to wrap getRepository which is already wrapped
我需要用 sinon 多次包装一个方法，以便能够根据参数返回不同的对象。我该怎么做？我要测试的 Controller 看起来像这样: const servicePackagesOfferingRep
testing - 诗农JS "Attempted to wrap ajax which is already wrapped"
我在运行测试时收到了上述错误消息。下面是我的代码(我正在使用 Backbone JS 和 Jasmine 进行测试)。有谁知道为什么会这样？ $(function() { describe("Ca
css - 如何使用 flex-wrap :wrap applied? 删除元素的子元素之间的空格
问题是关于.text-wrapper，它有display:flex; flex-wrap:wrap 应用于它。使用 flex-wrap:wrap 的原因是，否则 .text-wrapper 和 .ta
html - 为什么 flex-wrap : wrap not work on safari
我有三个带有 Bootstrap 3 的 DIV 容器，其中前两个在第一行，第三个在下一行，直到浏览器宽度直到 991 px。高于 992 px，所有三个容器应排成一行。每行容器的高度应该是最高的 (
css - 为什么 "flex-wrap: wrap"会中断 "align-items"？
(我使用的是 Chrome v.39+) 我正在尝试使用 flex-wrap 属性水平和垂直堆叠子 div，但我看到了一些非常奇怪的行为。例如，如果有 3 个子 div，最后一个的宽度为 100%(使
html - Flex-box 多行。如何使用: flex-wrap: wrap?
我必须这样做。适用于宽屏、中屏和小屏 https://pp.vk.me/c629328/v629328337/21bd7/izp9QG8Qcg4.jpg 这是我的代码 .section-items-c
html - 为什么不使用 flex-wrap :wrap? 将 flex 元素换行到第二行
我想要一个每行 3 个元素的容器 flex div，问题是当我添加第四个元素时(它应该自动换行到第二行)，而不是它停留在一行并缩小其他元素。我启用了 flex-wrap: wrap; 这是我的代码:
javascript - 带有 flex-wrap :wrap 的 flex 容器中的斑马条纹行
假设我正在使用一个带有 flex-direction:row 和 flex-wrap:wrap 的 flexbox 容器。根据浏览器窗口的大小，每行中可能有 2、3、4 或更多项。我想在每隔一行的
css - flex 包装 :wrap doesn't wrap when I am changing browser's width
我已经添加了所有属性。当我更改浏览器宽度时，它们开始相互粘连，这是因为我有太多图像而无法正常工作？无法将图像换行: #skills>div { margin-top: 80px; displ
html - 如何在没有 flex-wrap 的 ionic 框架中制作每行包含两个图像的图像网格 :wrap;
我想制作一个网格，其中每行有两张图片。我正在使用 flex-wrap: wrap;它在 android 4.4+ 上运行良好，但不适用于低于 android 4.4 的系统。我想在不使用 flex-w
php - wrap-function, wrap-raf, contextual-ee 附加在网页上
我的网站出现异常行为。我最近在网站管理员工具上发现，它发现我网站上的许多网页都出现抓取错误 404。我无法理解这些页面是如何创建的，因为所有 404 页面最后都包含这几个字 wrap-function
c# - 使用 MongoDB C# 驱动程序 : Wrapped or Un-Wrapped?
我正在使用 MongoDB C# 驱动程序构建一些更新语句。 The C# API在 Builder 命名空间中包括 Wrapped 和“Un-Wrapped”方法。从表面上看，这些似乎因泛型不同而

首页

博学

6Ren·AI

商城

css - 我如何使用 "flex-flow: column wrap"？

精简版

原始问题