Question

关于flexbox的一个非常酷的事情是，如果有空间，那么flex项目就是＆＃39;边距包含在flex容器的宽度中，即使我告诉它占据整个空间。例如，如果我有一个100px宽的柔性容器，并给它一个占据整个宽度的孩子，那么给孩子两边10px的边距，孩子实际上变成80px宽，因为容器允许孩子完全封装，包括边距。这忽略了对溢出的担忧，这可以很容易地解决（min-width: 0;通常会处理这个）。

＆＃13;

flex-container {
  width: 100px;
  height: 100px;
  display: flex;
  background-color: dodgerblue;
}

flex-item {
  display: block;
  background-color: darkgray;
  margin-left: 10px;
  margin-right: 10px;
  width: 100%;
  height: 20px;
  margin-top: 20px;
}

＆＃13;

<flex-container>
  <flex-item>
  </flex-item>
</flex-container>

＆＃13;

然而，这个技巧似乎并没有扩展到横轴（height通常，width和flex-direction: column。如果我现在在顶部和底部给我的灵活项目10px边距，而不是左边和右边。对，并给它整个高度而不是像以前一样的整个宽度，它开始延伸超过容器的底部边缘。那是为什么？

＆＃13;

flex-container {
  width: 100px;
  height: 100px;
  display: flex;
  background-color: dodgerblue;
}

flex-item {
  display: block;
  background-color: darkgray;
  margin-top: 10px;
  margin-bottom: 10px;
  height: 100%;
  width: 20px;
  margin-left: 20px;
}

＆＃13;

<flex-container>
  <flex-item>
  </flex-item>
</flex-container>

＆＃13;

我在Google Chrome和Firefox上都看到了这种行为。它可能也是Internet Explorer / Edge的案例，但我没有能力进行测试。

为什么flex项目保留在主轴的边距内，而不是横轴？

Answer 1

原因是在flex方向设置，并且由于flex-grow的默认值为0，因此不允许增长，但允许缩小，（flex-shrink默认为{ {1}}），所以它确实如此。

以下是使用列方向的相同测试，您将获得相反的行为。

您的第一个样本，但列方向

flex-container {
  width: 100px;
  height: 100px;
  display: flex;
  flex-direction: column;
  background-color: red;
}

flex-item {
  display: block;
  background-color: green;
  margin-left: 10px;
  margin-right: 10px;
  width: 100%;
  height: 20px;
  margin-top: 20px;
}

您的第二个样本，但列方向

<flex-container>
  <flex-item>
  </flex-item>
</flex-container>

flex-container {
  width: 100px;
  height: 100px;
  display: flex;
  flex-direction: column;
  background-color: red;
}
flex-item {
  display: block;
  background-color: green;
  margin-top: 10px;
  margin-bottom: 10px;
  height: 100%;
  width: 20px;
  margin-left: 20px;
}

根据评论更新。

如果你想要一个类似的行为，flex项目缩小并且不会溢出其父项，只需删除给定的宽度/高度

行方向示例

<flex-container>
  <flex-item>
  </flex-item>
</flex-container>

flex-container {
  width: 100px;
  height: 100px;
  display: flex;
  background-color: green;
}

flex-item {
  display: block;
  background-color: orange;
  margin-top: 10px;
  margin-bottom: 10px;
  width: 20px;
  margin-left: 20px;
}

列方向示例

<flex-container>
  <flex-item>
  </flex-item>
</flex-container>

flex-container {
  width: 100px;
  height: 100px;
  display: flex;
  flex-direction: column;
  background-color: green;
}

flex-item {
  display: block;
  background-color: orange;
  margin-left: 10px;
  margin-right: 10px;
  height: 20px;
  margin-top: 20px;
}

Answer 2

弹性容器的初始设置为flex-shrink: 1。

这意味着Flex项目会在必要时收缩，以避免容器溢出。

flex-shrink属性（以及flex-grow，flex-basis和flex）仅适用于主轴。这就是为什么你看到宽度与高度的差异的例子。

向行方向容器中的弹性项目添加顶部和底部边距时，flex-shrink: 1功能不适用（因为您现在在横轴上），因此该项目不会收缩以适应增加的利润。

如果禁用flex-shrink，带有水平边距的弹性项目将溢出容器：

＆＃13;

flex-container {
  width: 100px;
  height: 100px;
  display: flex;
  background-color: red;
}

flex-item {
  flex-shrink: 0; /* new */
  margin-left: 10px;
  margin-right: 10px;
  width: 100%;
  height: 20px;
  margin-top: 20px;
  background-color: green;
}

＆＃13;

<flex-container>
  <flex-item></flex-item>
</flex-container>

＆＃13;

Answer 3

当您将flexbox定义为列并删除宽度：100％时，它将尊重边距。

＆＃13;

flex-container {
  width: 100px;
  height: 100px;
  display: flex;
  background-color: red;
}

flex-item {
  display: block;
  background-color: green;
  margin-left: 10px;
  margin-right: 10px;
  width: 100%;
  margin-top: 20px;
  margin-bottom: 20px;
}

＆＃13;

<flex-container>
  <flex-item>
  </flex-item>
</flex-container>

＆＃13;

横轴长度忽略边距

3 个答案: