首页 文章

我如何使用“flex-flow：column wrap”？

提问于
浏览 次
39

短版

当使用 flex-flow: column wrap 和 display: inline-flex 时，它不像 inline-block 那样收缩包装：

enter image description here

(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容器的大小如何变化（或不变！）

我想要这种行为，因为我想将这些元素并排放置在一个水平滚动的网站上 .

Why doesn't it shrinkwrap? How do I make it shrinkwrap?

原始问题

flex-flow: row wrap 很容易理解 . 如果没有"flexing"，它的作用类似于内联元素;它向右流动直到它不能再这样做，此时它会形成一个新行 .

flex-flow: column wrap 与 display: flex 类似 . 它向下流动，直到它不再流下来（ max-width ？），然后开始一个新列 . 当然，由于父级是 display: flex ，它是一个块级元素，所以由于 align-content 默认为 stretch 这一事实，该列将中途结束 . 我可以轻松地将其更改为 flex-start 以使新列与前一列相邻 .

......但容器仍然太宽 . 它仍然是一个块，并填充它的父亲的宽度 .

I need the flexbox to shrink-to-fit its columns. 为什么？我正在尝试在水平滚动网站中使用flexbox . 当然，我可以让孩子们满溢，但那种溢出往往会让......破坏 . 所以我想我需要 flex-flow: column wrap 与 display: inline-flex . 我希望有一个"top to bottom, left to right"效果，父母没有空格 .

......然后this发生了 . 在chrome中，父宽度等于子宽度的总和，但否则，换行是正常的 . 在firefox中，父级是全宽的，只是变得更高以容纳元素（我不认为firefox支持包装） . 在IE11中，宽度是正确的，但是孩子们只是向下溢出（甚至是身体外） .

我很困惑 .

我在这做错了什么？我知道flexbox是一个更新的功能，但我不知道这与浏览器有多大关系 .

按照他们的方式，我用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>
css css3 flexbox

3 回答

  • 0

    这确实是一个错误 . 这里是跟踪器的链接：

    https://bugs.chromium.org/p/chromium/issues/detail?id=247963 https://bugs.chromium.org/p/chromium/issues/detail?id=507397

    OP想要：

    我需要flexbox缩小以适应其列 . 为什么？我正在尝试在水平滚动网站中使用flexbox . 当然，我可以让孩子们满溢，但那种溢出往往会让......破坏 . 所以我想我需要flex-flow：带有display：inline-flex的列包装 . 我希望有一个“从上到下，从左到右”的效果，父母没有空的空间 .

    我们可以简单地用 flex-flow: column wrap; ， align-content: flex-start; 和一个固定高度的包装器来实现它 .

    http://output.jsbin.com/qixuxiduxe/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

    回复于
  • 0

    可能会迟到但我认为Firefox并不完全支持'column-wrap' . 如你所说，你需要在Chrome中使用它，在这种情况下你可以看到Chris Coyier所做的：添加webkit前缀 - > http://css-tricks.com/snippets/css/a-guide-to-flexbox/

    希望不迟到：/

    回复于
  • 4

    如果你不知道每个项目的高度或你将拥有多少项目，那么更灵活的解决方案是：

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

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

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

    回复于

相关问题