Html 当自动给定边距0时，为什么柔性列子项不跨越100%宽度？

这发生在使用Zurb基金会的XY网格时，但实际上是一个普通的CSS Flex问题；考虑下面的代码：

<div style="display:flex;flex-direction:column;height:100vh">
  <div style="flex: 1;background-color:yellow">

  </div>

  <div style="
    background-color:blue;
    color:white;
    padding-right: 0.9375rem;
    padding-left: 0.9375rem;

    margin: 0 auto;
    ">
  Why does this not span 100% width<br/>like any block elem would?
  </div>
</div>

为什么它不像任何块元素那样跨越100%宽度
？

（）

---

为什么X轴中的底部div只根据其内容的需要使用尽可能多的宽度，而不是像任何块元素通常那样使用全宽度；为了实现这一点，我应该做些什么（可能比将其宽度设置为100%更好？

当您设置

边距0 auto

时，您正在使用速记属性来表示：

• 页边距顶部：0

• 右边距：自动

• 页边距底部：0

• 左边距：自动

在flexbox中，

auto

页边距在其定义的方向上消耗所有空间。因此，

marginleft:auto

和

marginright:auto

将占用flex项目两侧的所有可用空间，从而使项目居中

如果您只是想将文本居中，则将实际文本居中，而不是弹性项上的

auto

页边距：

与此相反：

div { margin: 0 auto; }

试试这个：

div { display: flex; justify-content: center; text-align: center; }

正文{
保证金：0；
填充：0；
}

为什么它不像任何块元素那样跨越100%宽度
？

我看不到添加

display:flex的价值；证明内容：中心，
文本对齐：居中
就足够了，对吗？嗨@LGSon，是的，这很可能是真的。在OP需要垂直居中的情况下，使用flex属性可能也很有用。。。对，我正要添加，除非他们添加一个子元素，当然。