Question

我具有以下结构，并且我想了解为什么我的行不随其内部内容而增长。

.row {
  border:solid red;
  display: flex;
  flex-direction: row;
}


.cell {
  border: solid green;
  flex: 0 0 400px;
}

<div class="row">
  <div class="cell">
   cell 1
  </div>
  <div class="cell">
   cell 2
  </div>
  <div class="cell">
   cell 3
  </div>
</div>

JsFiddle

我不希望单元格增大或缩小，它们应始终为400px宽度。父级应该增长并使窗口溢出，并且应该使用水平滚动条。

在上面的示例中，红色边框应围绕绿色边框。绿色边框具有预期的尺寸，而不是红色边框。

出于与我的用例相关的可维护性原因，我不想为行设置静态宽度。

我愿意接受非flexbox解决方案（请参阅inline-block attempt），但希望能多使用一种flexbox（因为我需要在行上使用align-items: center行为）

Answer 1

如果您希望容器始终与其子容器的宽度匹配，则需要查看display: inline-flex。

display: flex的行为更像是宽度为100％的容器

这是一个应该起作用的小提琴： http://jsfiddle.net/hnrs64fm/

Flexbox行：不会根据内容增长吗？

1 个答案: