Question

带有flex-wrap: nowrap的flexbox难道不是孩子的宽度吗？

由于某种原因，它只是其父级的宽度。是否有可能使其宽度达到子级宽度？

在this codepen中，您可以看到背景并没有扩展所有子级的整个宽度。

.flex {
  display: flex;
  flex-wrap: nowrap;
  background-color: lightblue;
}

.flex div {
  flex-basis: 75%;
  flex-shrink: 0;
}

<div class="flex">
  <div>hi</div>
  <div>hi</div>
  <div>hi</div>
  <div>hi</div>
</div>

编辑：我使用“应该” 的假设是，将white-space: nowrap应用于内联子级的典型div会增长以容纳其子级；但是，这也不是真的（https://codepen.io/robgordon/pen/gEvjpL）。

Answer 1

您的元素是一个块元素，这意味着它的宽度是其包含的块宽度的100％，在这种情况下，它是主体元素。

在body元素上添加边框以更好地查看：

.flex {
  display: flex;
  flex-wrap: nowrap;
  background-color: lightblue;
}

.flex div {
  flex-basis: 75%;
  flex-shrink: 0;
}

body {
  border:2px solid green;
}

<div class="flex">
  <div>hi</div>
  <div>hi</div>
  <div>hi</div>
  <div>hi</div>
</div>

如果您向html添加边框，则对body元素也要考虑，因为这也是一个块元素：

.flex {
  display: flex;
  flex-wrap: nowrap;
  background-color: lightblue;
}

.flex div {
  flex-basis: 75%;
  flex-shrink: 0;
}

body {
  border:2px solid green;
}
html {
  border:2px solid red;
}

<div class="flex">
  <div>hi</div>
  <div>hi</div>
  <div>hi</div>
  <div>hi</div>
</div>

因此，所有元素都将根据您的屏幕尺寸进行限制。根据{{3}}，我们有以下规则：

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

由于我们没有填充/边距/边界，因此我们将拥有width = width of containing block。

此逻辑适用于我们所有的元素，直到到达视口为止

根元素所在的包含块是一个称为初始包含块的矩形。对于连续媒体，它具有视口尺寸，并固定在画布原点；它是分页媒体的页面区域。初始包含块的“ direction”属性与根元素相同。

在您的情况下，也没有办法仅包含所有元素，因为您使用的是在所有情况下都大于父元素的顶点来定义元素的宽度。您拥有的4*75%总是比100%大。

所以无论如何，您总是会溢出：

.flex {
  display: flex;
  flex-wrap: nowrap;
  background-color: lightblue;
}

.flex div {
  flex-basis: 75%;
  flex-shrink: 0;
}

body {
  border:2px solid green;
}

<div class="flex" style="display:inline-flex">
  <div>hi</div>
  <div>hi</div>
  <div>hi</div>
  <div>hi</div>
</div>

<div class="flex" style="width:50%;">
  <div>hi</div>
  <div>hi</div>
  <div>hi</div>
  <div>hi</div>
</div>

<div class="flex" style="width:500%;">
  <div>hi</div>
  <div>hi</div>
  <div>hi</div>
  <div>hi</div>
</div>

<div class="flex" style="width:200px;">
  <div>hi</div>
  <div>hi</div>
  <div>hi</div>
  <div>hi</div>
</div>

但是，例如，如果宽度是使用像素定义的（假设500px），则父元素可以包含其子元素，其设置为inline-flex。

.flex {
  display: flex;
  flex-wrap: nowrap;
  background-color: lightblue;
}

.flex div {
  width: 500px;
  flex-shrink: 0;
}

body {
  border:2px solid green;
}

<div class="flex" style="display:inline-flex">
  <div>hi</div>
  <div>hi</div>
  <div>hi</div>
  <div>hi</div>
</div>

<div class="flex" >
  <div>hi</div>
  <div>hi</div>
  <div>hi</div>
  <div>hi</div>
</div>

在这种情况下，宽度是缩小以适应的宽度，如下所述：

缩小到适合的宽度的计算类似于使用自动表格布局算法来计算表格单元格的宽度。粗略地：通过格式化内容而不在出现明确的换行符的地方换行而不折断来计算首选宽度，并且还可以通过尝试所有可能的换行符来计算首选的最小宽度。 CSS 2.1并未定义确切的算法。第三，找到可用宽度：在这种情况下，这是包含块的宽度减去“ margin-left”，“ border-left-width”，“ padding-left”，“ padding-right”， 'border-right-width'，'margin-right'以及任何相关滚动条的宽度。

然后缩小为适合宽度为：min(max(preferred minimum width, available width), preferred width).

请注意，将flex-basis与像素值一起使用不会得到与width相同的结果

.flex {
  display: flex;
  flex-wrap: nowrap;
  background-color: lightblue;
}

.flex div {
  flex-basis: 500px;
  flex-shrink: 0;
}

body {
  border:2px solid green;
}

<div class="flex" style="display:inline-flex">
  <div>hi</div>
  <div>hi</div>
  <div>hi</div>
  <div>hi</div>
</div>

<div class="flex" >
  <div>hi</div>
  <div>hi</div>
  <div>hi</div>
  <div>hi</div>
</div>

此处有更多详细信息：the specification

^{nowrap是flex-wrap的默认值，因此在以下示例中可以省略}

flex-wrap：nowrap宽度不包含子项

1 个答案: