我需要实现一个相当普遍的磨坊砌体布局.但是,出于多种原因,我不想使用JavaScript来执行此操作.

参数:

• 所有元素都具有相同的宽度
• 元素的高度无法在服务器端计算(图像加上各种文本量)
• 如果必须的话,我可以使用固定数量的列

有这一个简单的解决方案,在现代浏览器,工作的column-count性质.

该解决方案的问题是元素按列排序:

虽然我需要按行排序元素,至少大约:

我试过的方法不起作用:

• 制作物品display: inline-block:浪费垂直空间.
• 制作物品float: left:lol,没有.

现在我可以更改服务器端渲染并重新排序项目数除以列数的项目,但这很复杂,容易出错(基于浏览器决定将项目列表拆分成列的方式),所以我想要尽可能避免它.

是否有一些新奇的flexbox魔法可以实现这一目标？

实际上,这是Pinterest布局.但是,在线发现的解决方案包含在列中,这意味着容器无意中水平生长.这不是 Pinterest布局,并且它不适用于动态加载的内容.

我想要做的是有一堆固定宽度和不对称高度的图像,水平放置,但当满足固定宽度容器的限制时包裹在一个新行中:

flexbox可以做到这一点,还是我不得不求助于像Masonry这样的JS解决方案？

精简版

使用flex-flow: column wrap和时display: inline-flex,它不收缩包装inline-block:

(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);
    } …

我的问题是我希望flexbox具有可变范围宽度,并且一切正常,但不是最后一行.我希望所有孩子都有相同的维度,即使行没有孩子(最后一行).

#products-list {
    position:relative;
    display: flex;
    flex-flow: row wrap;
    width:100%;
}

#products-list .product {
    min-width:150px;
    max-width:250px;
    margin:10px 10px 20px 10px;
    flex:1;
}

在JSFiddle示例中,我创建了一个动态情境.

我的flex div可以缩小到150px并且长到250px,但所有都必须具有相同的大小(显然我想要一个CSS解决方案,JS我知道的方式).

使用css时flexbox,三个主要浏览器在某些区域的行为似乎完全不同.

在这种情况下,我试图创建一个图像网格:

<div class="container">
     <div class="photo"></div>
     <div class="photo"></div>
     <div class="photo"></div>
     <div class="photo"></div>
     <div class="photo"></div>
     <div class="photo"></div>
</div>


.container {
    display:inline-flex;
    flex-flow : column wrap;
    align-content : flex-start;
    height : 100%;
}

在这个例子中,我需要一个容器,它本身包含几个div元素,设置为从顶部到底部流动,并在它们到达底部时包裹.最终为我提供了一系列照片.

但是,我需要容器水平扩展以容纳包装元素:

这是一个快速的jsFiddle来演示.

行为如下:

• IE 11 - 正确,容器水平拉伸以包裹每列包裹的元素
• Firefox - 容器只包装第一列元素,其余元素溢出.
• Chrome - 容器总是伸展以填充其父级的宽度,无论可能是什么.

在这个例子中,我想在其他两个浏览器中实现IE11的行为.因此我的问题是,如何使flexbox容器水平扩展以匹配其column wrap内容.

提前致谢.

从下面的Snippet(View as Fiddle)中可以看到,绝对定位的柱状flexbox不会扩展以适应其子节点.

例如,在Chrome中,它只会与最宽的子元素一样宽,并且与最短的列一样高.

任何人都可以提出解决方案而不使用任何额外的标记？

编辑:列表中的项目数将是动态的,每个项目中的文本也是动态的.我需要在一定数量的项目之后拆分到新列.

*{box-sizing:border-box;}
ul{
    background:#090;
    display:flex;
    flex-flow:column wrap;
    left:0;
    list-style:none;
    max-height:202px;
    padding:5px;
    position:absolute;
    top:0;
}
li{
    background:rgba(255,0,0,.75);
    color:#fff;
    flex:1 0 30px;
    font-family:arial;
    line-height:30px;
    max-height:30px;
    margin:1px;
    padding:0 2px;
    min-width:100px;
}

<ul>
    <li>Line 0</li>
    <li>Line 1</li>
    <li>Line 2</li>
    <li>Line 3</li>
    <li>Line 4</li>
    <li>Line 5</li>
    <li>Line 6</li>
    <li>Line 7</li>
    <li>Line 8 is a little bit longer</li>
</ul>

在默认行方向上使用弹性框时,容器高度会增加以包含所有弹性项,即使它是绝对定位的.

#container {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
}

#container > div {
  flex: 0 0 200px;
  height: 200px;
}

请参阅http://codepen.io/tamlyn/pen/dPjLoN/?editors=110

但是,如果将flex方向更改为column,则容器将折叠到单个flex项的宽度,即使这些项包装到下一列也是如此.

#container {
  position: absolute;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

#container > div {
  flex: 0 0 200px;
  width: 200px;
}

见http://codepen.io/tamlyn/pen/rarbeN?editors=110

如何使容器包含column模式中的所有弹性项目？

任何人都可以告诉我如何使右上容器和右下容器具有相同的高度并将红色容器垂直分开50-50%.无论里面的内容是什么.我尝试拉伸内容并将它们包裹起来,同时保持flex-direction: row对物品保持相同的高度,但我迷路了.

我的期望:右上方的容器与右下方的高度相同,这也导致左侧容器自动增长.

这是我到目前为止:http://jsbin.com/rozoxoneki/edit？html,css,output

.flex{
  display: flex;
  border: 5px solid red;
  &-child{
    background: green;
    border: 2px solid yellow;
    flex: 1;
  }
}

.flex--vertical{
  flex-direction: row;
  flex-wrap: wrap;

  > .flex-child{
    min-width: 100%;
  }
}


<div class="flex">
  <div class="flex-child">
    left
  </div>
  <div class="flex-child flex flex--vertical">
    <div class="flex-child">
      <h1>right top</h1>
    </div>
    <div class="flex-child">
      <h1>right bottom</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium autem esse iste voluptate …

我有一个容器和几个内部div.

.container {
 display: inline-flex;
 flex-flow: column wrap;
 max-height: 500px;
}
.element {
  width: 200px;
  height: 200px;
  margin: 10px;
  background: #000;
}

现在我有3个弹性柱.

我的预期:容器的宽度等于列宽(660px)的总和.

我得到了:容器的宽度等于第一列的宽度.

笔:http: //codepen.io/korsun/pen/zGpQrZ

为什么？当我将flex-direction更改为row并将max-height更改为max-width时,一切都按预期进行.有没有办法让我的容器宽度等于内容宽度？

我想要一个flex-direction: column;flexbox容器,其宽度增长以适应包含元素.

在这个codepen中:

灰色div是flexbox容器,红色div包含在内部,并使用flexbox布置在列中.灰色div需要扩展/收缩其宽度以完美地包含红色子div.这可能吗？

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 290px;
  align-content: flex-start;
  padding: 2px;
  background: grey;
}
.child {
  background: red;
  width: 100px;
  height: 100px;
  margin: 2px;
}

<div class="container">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>