当flexbox项目以列模式换行时，容器不会增加其宽度-Java 学习之路

109

我正在研究嵌套的flexbox布局，它应该如下工作：

最外层（ ul#main ）是一个水平列表，当添加更多项目时，它必须向右扩展 . 如果它变得太大，应该有一个水平滚动条 .

#main {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    /* ...and more... */
}

此列表中的每个项目（ ul#main > li ）都有一个 Headers （ ul#main > li > h2 ）和一个内部列表（ ul#main > li > ul.tasks ） . 此内部列表是垂直的，应在需要时包装到列中 . 当包装到更多列时，其宽度应该增加，以便为更多项目腾出空间 . 此宽度增加也应适用于外部列表的包含项 .

.tasks {
    flex-direction: column;
    flex-wrap: wrap;
    /* ...and more... */
}

我的问题是当窗口的高度太小时内部列表不会换行 . 我已经尝试了很多篡改所有的flex属性，试图在CSS-Tricks精心遵循指南，但没有运气 .

这个JSFiddle显示了我到目前为止的情况 .

Expected result （我想要的）：

My desired output

Actual result （我得到的）：

My current output

Older result （我在2015年得到的）：

My older output

更新

经过一番调查，这开始看起来像一个更大的问题 . All major browsers behave the same way ，它与我的嵌套Flexbox设计无关 . 更简单的flexbox列布局拒绝在项目换行时增加列表的宽度 .

这other JSFiddle清楚地证明了这个问题 . 在当前版本的Chrome，Firefox和IE11中，所有项目都正确包装;列表的高度在 row 模式下增加，但在 column 模式下其宽度不会增加 . 此外，在更改 column 模式的高度时，根本没有立即回流元素，但是在 row 模式中 .

但是，official specs (look specifically at example 5)似乎表明我想做的事情应该是可能的 .

有人可以提出解决这个问题的方法吗？

更新2

经过大量的实验尝试使用JavaScript来更新调整大小事件期间各种元素的高度和宽度，我得出结论，尝试以这种方式解决它太复杂和太麻烦 . 此外，添加JavaScript肯定会破坏flexbox模型，该模型应尽可能保持干净 .

现在，我回到 overflow-y: auto 而不是 flex-wrap: wrap ，以便内部容器在需要时垂直滚动 . 它不漂亮，但它是一种前进的方式，至少不会过多地破坏可用性 .

4 回答

可能的JS解决方案

var ul = $("ul.ul-to-fix");

if(ul.find("li").length>{max_possible_rows)){
    if(!ul.hasClass("width-calculated")){
        ul.width(ul.find("li").eq(0).width()*ul.css("columns"));
        ul.addClass("width-calculated");
     }
}

回复于 2024-04-29T11:16:40+08:00

由于尚未提出任何解决方案或正确的解决方法，我设法通过一种不同的方法获得所请求的行为 . 我没有将布局分成3个不同的div，而是将所有项目添加到1个div中，并在两个div之间创建更多div .

建议的解决方案是硬编码的，假设我们有3个部分，但可以扩展为通用部分 . 主要思想是解释我们如何实现这种布局 .

将所有项目添加到1个容器div中，该div使用flex来包装项目
每个"inner container"的第一项（我将其称为一个部分）将有一个类，这有助于我们进行一些操作，创建每个部分的分离和样式 .
在每个第一项上使用 :before ，我们可以找到每个部分的 Headers .
使用 space 会在各部分之间创建间隙
由于 space 赢了't cover the full height of the section I' m也将 :after 添加到这些部分，因此将其定位为绝对位置和白色背景 .
为了设置每个部分的背景颜色，我在每个部分的第一个项目中添加另一个div . 我也将保持绝对的位置，并将 z-index: -1 .
为了获得每个背景的正确宽度，我使用JS，设置正确的宽度，还添加一个侦听器来调整大小 .

function calcWidth() {
  var size = $(document).width();
  var end = $(".end").offset().left;

  var todoWidth = $(".doing-first").offset().left;
  $(".bg-todo").css("width", todoWidth);

  var doingWidth = $(".done-first").offset().left - todoWidth;
  $(".bg-doing").css("width", doingWidth);

  var doneWidth = $(".end").offset().left - $(".done-first").offset().left;
  $(".bg-done").css("width", doneWidth + 20);

}

calcWidth();

$(window).resize(function() {
  calcWidth();
});

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 120px;
  align-content: flex-start;
  padding-top: 30px;
  overflow-x: auto;
  overflow-y: hidden;
}

.item {
  width: 200px;
  background-color: #e5e5e5;
  border-radius: 5px;
  height: 20px;
  margin: 5px;
  position: relative;
  box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.75);
  padding: 5px;
}

.space {
  height: 150px;
  width: 10px;
  background-color: #fff;
  margin: 10px;
}

.todo-first:before {
  position: absolute;
  top: -30px;
  height: 30px;
  content: "To Do (2)";
  font-weight: bold;
}

.doing-first:before {
  position: absolute;
  top: -30px;
  height: 30px;
  content: "Doing (5)";
  font-weight: bold;
}

.doing-first:after,
.done-first:after {
  position: absolute;
  top: -35px;
  left: -25px;
  width: 10px;
  height: 180px;
  z-index: 10;
  background-color: #fff;
  content: "";
}

.done-first:before {
  position: absolute;
  top: -30px;
  height: 30px;
  content: "Done (3)";
  font-weight: bold;
}

.bg-todo {
  position: absolute;
  background-color: #FFEFD3;
  width: 100vw;
  height: 150px;
  top: -30px;
  left: -10px;
  z-index: -1;
}

.bg-doing {
  position: absolute;
  background-color: #EFDCFF;
  width: 100vw;
  height: 150px;
  top: -30px;
  left: -15px;
  z-index: -1;
}

.bg-done {
  position: absolute;
  background-color: #DCFFEE;
  width: 10vw;
  height: 150px;
  top: -30px;
  left: -15px;
  z-index: -1;
}

.end {
  height: 150px;
  width: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

  <div class="item todo-first">
    <div class="bg-todo"></div>
    Drink coffee
  </div>
  <div class="item">Go to work</div>

  <div class="space"></div>

  <div class="item doing-first">
    <div class="bg-doing"></div>
    1
  </div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>

  <div class="space"></div>

  <div class="item done-first">
    <div class="bg-done"></div>
    1
  </div>
  <div class="item">2</div>
  <div class="item">3</div>

  <div class="end"></div>

</div>

回复于 2024-04-29T11:16:40+08:00

-2
问题

这看起来像是flex布局的根本缺陷 .

列方向的Flex容器不会扩展以容纳其他列 . （这不是 flex-direction: row 中的问题 . ）

这个问题已被多次询问（参见下面的列表），CSS中没有干净的答案 .

很难将此作为一个错误，因为问题出现在所有主流浏览器中 . 但它确实提出了一个问题：

所有主流浏览器如何才能使flex容器在行方向上展开而不是在列方向上展开？

你会认为其中至少有一个会做对 . 我只能推测原因 . 也许这是一个技术上很难的实现，并且被搁置了这个迭代 .

UPDATE: 此问题似乎已在Edge v16中得到解决 .

问题说明

OP创建了一个有用的演示来说明问题 . 我在这里复制它：http://jsfiddle.net/nwccdwLw/1/

解决方法选项

Stack Overflow社区的Hacky解决方案：
- "It seems this issue cannot be solved only with CSS, so I propose you a JQuery solution."
- "It's curious that most browsers haven't implemented column flex containers correctly, but the support for writing modes is reasonably good. Therefore, you can use a row flex container with a vertical writing mode."
更多分析
- Chromium Bug Report
- Mark Amery's answer
其他帖子描述同样的问题
回复于 2024-04-29T11:16:40+08:00
116
另一种可行方法：
```
ul.tasks {
  column-count: 2; /*or whatever */
}
li.task {
  display: inline-block;
}
```
https://developer.mozilla.org/en-US/docs/Web/CSS/column-count

如果它们没有与顶部对齐，您可能还需要调整 margin-top 的 li.task:first-child .
回复于 2024-04-29T11:16:40+08:00

当flexbox项目以列模式换行时，容器不会增加其宽度

更新

更新2

4 回答

问题

问题说明

解决方法选项

更多分析

其他帖子描述同样的问题

相关问题