时间戳

首页 > 解决方案 > Flexbox / 始终强制采用 2 列布局（输入只有 1 个对象数组）

html - Flexbox / 始终强制采用 2 列布局（输入只有 1 个对象数组）

问题描述

我有一组对象，我通过 Ajax 调用从服务器获取，我需要始终将一个数组显示为两列布局。列应该是平衡的。使用 flex-direction: column 只是无限地扩展页面。我想确保始终有两列。

body {
  margin: 1em;
}

.container {
  display: flex;
  height: 90vh;
}

.item {
  flex: 1;
  background: lightblue;
}
<div class="container">
  <div class="item">
    <h1> Group 1 </h1>
    <div class="details">
      <h4> Object 1</h4>
      <h4> Object 2</h4>
    </div>
  </div>
</div>
<div class="item">
  <h1> Group 2 </h1>
  <div class="details">
    <h4> Object 1</h4>
    <h4> Object 2</h4>
    <h4> Object 3</h4>
    <h4> Object 4</h4>
    <h4> Object 5</h4>
  </div>
</div>
<div class="item">
  <h1> Group 3</h1>
  <div class="details">
    <h4> Object 1</h4>
  </div>
</div>
<div class="item">
  <h1> Group 4 </h1>
  <div class="details">
    <h4> Object 1</h4>
    <h4> Object 2</h4>
  </div>
</div>
<div class="item">
  <h1> Group 5 </h1>
  <div class="details">
    <h4> Object 1</h4>
    <h4> Object 2</h4>
    <h4> Object 3</h4>
    <h4> Object 4</h4>
  </div>
</div>

标签： htmlcsssassflexbox

解决方案

column-count在这里似乎很合适，还请注意，如前所述，.container仅包含一个的 html 结构，.item我相信你关闭它太早了。

body {
  margin: 1em;
}

.container {
  column-count: 2;
}

.item {
  padding: 0.5em;
  margin: 0 0.5em 1em;
  background: lightblue;
  break-inside: avoid;
  /* remove this to allow item to break to next column , demo below the first container */
}
h1 {margin:0  ;}
.item:nth-child(odd) {
  background: #bee/* demo see us */
}

.container~.container .item {
  break-inside: auto;
}
<div class="container">
  <div class="item">
    <h1> Group 1 </h1>
    <div class="details">
      <h4> Object 1</h4>
      <h4> Object 2</h4>
    </div>
  </div>

  <div class="item">
    <h1> Group 2 </h1>
    <div class="details">
      <h4> Object 1</h4>
      <h4> Object 2</h4>
      <h4> Object 3</h4>
      <h4> Object 4</h4>
      <h4> Object 5</h4>
    </div>
  </div>
  <div class="item">
    <h1> Group 3</h1>
    <div class="details">
      <h4> Object 1</h4>
    </div>
  </div>
  <div class="item">
    <h1> Group 4 </h1>
    <div class="details">
      <h4> Object 1</h4>
      <h4> Object 2</h4>
    </div>
  </div>
  <div class="item">
    <h1> Group 5 </h1>
    <div class="details">
      <h4> Object 1</h4>
      <h4> Object 2</h4>
      <h4> Object 3</h4>
      <h4> Object 4</h4>
    </div>
  </div>
</div>
<hr>
<div class="container">
  <div class="item">
    <h1> Group 1 </h1>
    <div class="details">
      <h4> Object 1</h4>
      <h4> Object 2</h4>
    </div>
  </div>

  <div class="item">
    <h1> Group 2 </h1>
    <div class="details">
      <h4> Object 1</h4>
      <h4> Object 2</h4>
      <h4> Object 3</h4>
      <h4> Object 4</h4>
      <h4> Object 5</h4>
    </div>
  </div>
  <div class="item">
    <h1> Group 3</h1>
    <div class="details">
      <h4> Object 1</h4>
    </div>
  </div>
  <div class="item">
    <h1> Group 4 </h1>
    <div class="details">
      <h4> Object 1</h4>
      <h4> Object 2</h4>
    </div>
  </div>
  <div class="item">
    <h1> Group 5 </h1>
    <div class="details">
      <h4> Object 1</h4>
      <h4> Object 2</h4>
      <h4> Object 3</h4>
      <h4> Object 4</h4>
    </div>
  </div>
</div>

推荐阅读