Question

正如您从下面的代码段（View as Fiddle）中看到的那样，绝对定位的柱状弹性箱不会扩展以适应其子女。

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

任何人都可以在不使用任何额外标记的情况下建议解决方案吗？

修改：列表中的项目数量将是动态的，每个项目中的文字也是动态的。我需要在一定数量的项目之后拆分到新列。

＆＃13;

*{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;
}

＆＃13;

<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>

＆＃13;

Answer 1

position:absolute;的弹性框不再被视为弹性框，因此是您当前的问题。

如果您要使用position:absolute;，则必须使用预定义的宽度和高度。

请参阅此处了解有关flexboxes http://www.w3.org/TR/css3-flexbox/#flex-items

的w3c

＆＃34; flex项目本身就是flex级别的框，而不是块级框：它们参与其容器的flex格式化上下文，而不是块格式化上下文。＆＃34;

通过更改为position:absolute;，您可以强制将flex容器作为块元素（这会发生在position:absolute;的所有元素上），从而消除了它的灵活性，也因为它的内容不是块它们是弹性子元素，它们只能影响弹性级别的容器而不是块级容器。

Jquery解决方案

是的，所以有一种方法可以用jquery来做。

这可能不是你想要的，因为它不仅仅是CSS，但确实有效。

我在这里做的是让容器的宽度达到原来的宽度。

然后获取每个第6个元素的最大宽度（因为当你的行中断以形成新列时）。

然后计算所有列的总数，并使用它将每列的最大宽度乘以列的数量，然后最后将它们全部加在一起以获得所需的容器宽度。

随意拿走并添加新专栏以进行全面测试。

Fiddle

＆＃13;

var count = $("ul.flex-container li:nth-child(6n)").length;

var firstWidth = Math.max.apply(null, $("ul.flex-container").map(function() {
  return $(this).outerWidth(true);
}).get());

var childWidth = Math.max.apply(null, $("ul.flex-container li:nth-child(6n+6)").map(function() {
  return $(this).outerWidth(true);
}).get());

var totalWidth = childWidth * count

$("ul.flex-container").css({
  width: firstWidth + totalWidth,
});

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul class="flex-container">
  <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>
  <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>

＆＃13;

Answer 2

您的子元素不适合flex-container的原因是您在容器上设置了max-height。

但是原始样本中发生的事情很奇怪（特别是从列中取出的子元素）;

当flexbox尝试填充它们时，看起来flex-items无法识别容器边框（甚至更改flex-direction:column）;
实际上唯一有意义的是最宽元素的最大宽度。

这是一个没有max-width的片段：

ul{
    background:#090;
    display:flex;
    flex-flow:column wrap;
    list-style:none;
    padding:5px;
    position:absolute; /*max-height:192px;*/
}
/*ul::after{display:table;clear:both; content:''}clearfix*/
li{
    background:rgba(255,0,0,.75);
    color:#fff;
    flex:1 0 30px;
    font-family:arial;
    line-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>

修改

我不知道你想要的输出是什么，但典型的flexbox实现可能是这样的：

ul{ background:#090; display:flex; flex-flow:column wrap; list-style:none; padding:5px; /*position:absolute;*/ height:192px; } /*ul::after{display:table;clear:both; content:''}/*clearfix*/ li{ background:rgba(255,0,0,.75); color:#fff; flex:1 0 30px; font-family:arial; line-height:30px; margin:1px; padding:0 2px; /* 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>

绝对定位的flexbox不会扩展以适应内容

2 个答案: