Question

我正在尝试创建一个包含行格式项目列表的 flexbox 容器，然后这些项目中的每一个都将是一个包含包装列格式项目的 flexbox。但是，第一个容器行似乎没有扩展以适应包装列的内容，最终彼此重叠。

我希望最终结果如下所示：

Map(transform, my_list, y = names(my_list))
$`1`
  x y
1 1 1
2 2 1
3 3 1

$`2`
  x y
1 4 2
2 8 2
3 1 2

$`3`
  x y
1 5 3
2 7 3
3 6 3

.flex-group {
  display: flex;
}

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  border: 1px solid silver;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 500px;
}

.red li {
  background: red;
}

.gold li {
  background: gold;
}

.blue li {
  background: deepskyblue;
}

.flex-item {
  padding: 5px;
  width: 100px;
  height: 100px;
  margin: 10px;
  
  line-height: 100px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}

所以在一天结束时，我希望有一个非换行行，其中每个子元素（动态数量）都可以包含一组列换行元素（动态数量）。注意：如果你让 .flex-container 有 flex-direction: row，你几乎可以得到解决方案，但我需要 flex-direction: column > 因为在这种情况下顺序确实很重要。主容器需要有一个固定的高度，每个子容器可以有一个动态宽度（由于包裹元素导致它们水平增长）。

Answer 1

我不确定我是否明白这一点，但听起来您不希望您的列处于“换行”模式。您可以尝试更改这些值：

.flex-container {
/* leave the rest of what was here*/
  flex-wrap: nowrap;
  height: 100%;
}

这就是我认为您想要实现的目标： expected solution

Answer 2

如果你会使用网格，你可以使用这个：

.flex-group {
  display: flex;
}

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  border: 1px solid silver;
  display: grid;
  grid-template-rows: repeat(3, auto);
  gap: 10px;
  grid-auto-flow: column;
  height: 500px;
}

.red li {
  background: red;
}

.gold li {
  background: gold;
}

.blue li {
  background: deepskyblue;
}

.flex-item {
  padding: 5px;
  width: 100px;
  height: 100px;
  margin: 10px;
  line-height: 100px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}

<div class="flex-group">

  <ul class="flex-container blue">
    <li class="flex-item">1</li>
    <li class="flex-item">2</li>
    <li class="flex-item">3</li>
    <li class="flex-item">4</li>
    <li class="flex-item">5</li>
    <li class="flex-item">6</li>
    <li class="flex-item">7</li>
    <li class="flex-item">8</li>
  </ul>
  <ul class="flex-container red">
    <li class="flex-item">1</li>
    <li class="flex-item">2</li>
    <li class="flex-item">3</li>
  </ul>

  <ul class="flex-container gold">
    <li class="flex-item">1</li>
    <li class="flex-item">2</li>
    <li class="flex-item">3</li>
    <li class="flex-item">4</li>
    <li class="flex-item">5</li>
  </ul>

  <div>

Answer 3

有很多类似的问题，但没有答案。我认为一种解决方法可以满足您的需求。包含一个脚本来根据您分配给每个 flex-container 的高度和 flex-item 高度计算宽度：

检查一下here

我必须将高度固定为 400 像素才能获得与您相同的输出，但此脚本将计算所需的列数和行数。无法正确获得填充，所以我设置了一个变量，可以获得所需的输出

document.querySelectorAll('.flex-container').forEach((e)=>{

  let p = 10 ;
  let childCount = e.childElementCount;
  let childHeight = e.children[0].clientHeight ; 
  let childWidth = e.children[0].clientWidth ; 
  let lines = Math.round((e.clientHeight / (e.children[0].clientHeight + 2*p))) ;
  let cols = Math.round(childCount / lines) ;
  let width = cols * ( 2*p +  childWidth );
 
  e.style.width = width+"px";
  
});

仍然如果您想要一个类似于 Pinterest 的基于列的项目显示，那么您需要提前指定列数并使用 Masonry Layout :


.masonry-container {
 column-count: 3;
 column-gap: 15px;
}
.masonry-item {
 display: inline-block;
 width: 100%;
}

嵌套 Flexbox 包装

3 个答案: