Question

我正在尝试创建一个在单个容器中创建动态列布局的系统，但我不确定这是否可行。供参考，请参阅以下代码：

.rekt {
  width: 422px;
  background-color: beige;
  height: 100%;
  padding: 15px;
  padding-bottom: 5px;
  margin-bottom: 10px;
  border: 1px solid black;
}

.rekt .row {
  background-color: lightgreen;
  color: royalblue;
  width: 97.5%;
  border: 1px solid black;
  padding: 5px;
  margin-bottom: 10px;
}

.rekt span {
  font-weight: bold;
  margin-bottom: 5px;
  display: inline-block;
}

<div class="flexbox">
  <div class='rekt'>
    <span>Cluster1</span>
    <div class='row'>foo</div>
    <div class='row'>bar</div>
    <div class='row'>foo</div>
    <div class='row'>bar</div>
    <div class='row'>foo</div>
  </div>

  <div class='rekt'>
    <span>Cluster2</span>
    <div class='row'>foo</div>
    <div class='row'>bar</div>
  </div>

  <div class='rekt'>
    <span>Cluster3</span>
    <div class='row'>foo</div>
    <div class='row'>bar</div>
    <div class='row'>foo</div>
  </div>

  <div class='rekt'>
    <span>Cluster4</span>
    <div class='row'>Cassandra</div>
    <div class='row'>Mongo</div>
  </div>

  <div class='rekt'>
    <span>Cluster5</span>
    <div class='row'>foo</div>
    <div class='row'>bar</div>
  </div>

  <div class='rekt'>
    <span>Cluster6</span>
    <div class='row'>foo</div>
    <div class='row'>bar</div>
    <div class='row'>foo</div>
    <div class='row'>bar</div>
    <div class='row'>foo</div>
    <div class='row'>bar</div>
    <div class='row'>foo</div>
    <div class='row'>bar</div>
    <div class='row'>foo</div>
    <div class='row'>bar</div>
    <div class='row'>foo</div>
    <div class='row'>bar</div>
    <div class='row'>foo</div>
    <div class='row'>bar</div>
    <div class='row'>bar</div>
  </div>
</div>

https://codepen.io/wa23/pen/WOMGxp

因此，每个rekt位于单个容器flexbox内，但每个rekt可以有一个可变高度，具体取决于用户插入的row个.flexbox { display: flex; flex-flow: column wrap; }它

理想情况下，你有像簇2,3这样的较小的，并且4被组合成一列，而cluster6将在它自己的列中，因为它是巨大的。

我尝试使用flexbox：

$scope

但这并没有像预期的那样奏效。我知道这些界限听起来很人为，但这就是系统的设置方式。

Answer 1

你提到你尝试过以下代码并且它没有工作：

.flexbox {
  display: flex;
  flex-flow: column wrap;
}

它可能没有用，因为你没有在容器上指定高度。如果没有固定的高度，柔性物品将不知道包裹的位置。

revised codepen

＆＃13;

.flexbox {
  display: flex;
  flex-flow: column wrap;
  align-content: flex-start;
  height: 100vh;
}
.rekt {
  width: 422px;
  background-color: beige;
  /* height: 100%; */
  padding: 15px;
  padding-bottom: 5px;
  /* margin-bottom: 10px; */
  border: 1px solid black;
}
.row {
  background-color: lightgreen;
  color: royalblue;
  width: 97.5%;
  border: 1px solid black;
  padding: 5px;
  margin-bottom: 10px;
}
span {
  font-weight: bold;
  margin-bottom: 5px;
  display: inline-block;
}
body {
  margin: 0;
}

＆＃13;

<div class="flexbox">
  <div class='rekt'>
    <span>Cluster1</span>
    <div class='row'>foo</div>
    <div class='row'>bar</div>
    <div class='row'>foo</div>
    <div class='row'>bar</div>
    <div class='row'>foo</div>
  </div>

  <div class='rekt'>
    <span>Cluster2</span>
    <div class='row'>foo</div>
    <div class='row'>bar</div>
  </div>

  <div class='rekt'>
    <span>Cluster3</span>
    <div class='row'>foo</div>
    <div class='row'>bar</div>
    <div class='row'>foo</div>
  </div>

  <div class='rekt'>
    <span>Cluster4</span>
    <div class='row'>Cassandra</div>
    <div class='row'>Mongo</div>
  </div>

  <div class='rekt'>
    <span>Cluster5</span>
    <div class='row'>foo</div>
    <div class='row'>bar</div>
  </div>

  <div class='rekt'>
    <span>Cluster6</span>
    <div class='row'>foo</div>
    <div class='row'>bar</div>
    <div class='row'>foo</div>
    <div class='row'>bar</div>
    <div class='row'>foo</div>
    <div class='row'>bar</div>
    <div class='row'>foo</div>
    <div class='row'>bar</div>
    <div class='row'>foo</div>
    <div class='row'>bar</div>
    <div class='row'>foo</div>
    <div class='row'>bar</div>
    <div class='row'>foo</div>
    <div class='row'>bar</div>
    <div class='row'>bar</div>
  </div>
</div>

＆＃13;

更多信息：

单个容器内的CSS动态列

1 个答案: