Flexbox行:不会根据内容增长吗? [英] Flexbox row: doesn't grow according to content?

问题描述

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

I have the following structure, and I'd like to understand why my row does not grow with its inner content.

.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宽度.父对象应该长大并使窗口溢出，并且应该使用水平滚动条.

I don't want the cells to grow or shrink, they should always be 400px width. The parent should grow and overflow the window, and an horizontal scrollbar is expected.

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

In the above example, the red border should be around the green border. The green border has the expected dimensions, not the red one.

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

I don't want to set a static width to my row for maintainability reasons related to my usecase.

我愿意接受非Flexbox解决方案(请参见内联阻止尝试) ，但希望能多使用一种flexbox(因为我需要在行上使用align-items: center行为)

I'm open for non-flexbox solutions (see inline-block attempt), but would appreciate more a flexbox one (because I need align-items: center behavior on the row)

推荐答案

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

If you want your container to always match the width of it's children, you'll need to look into display: inline-flex.

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

display: flex behaves more like a container with a width of 100%

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

Here's a fiddle that should work: http://jsfiddle.net/hnrs64fm/

这篇关于Flexbox行:不会根据内容增长吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！