为什么自动给定margin 0时,flex列子代不会跨越100%的宽度?

时间:2018-07-16 19:28:13

标签: html css css3 flexbox

这是在使用Zurb Foundation的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>

Fiddle

为什么下div在其X轴上仅占用其内容所需的宽度,而不是像任何块元素通常那样占用整个宽度;而我应该怎么做才能做到这一点(比将其宽度设置为100%更好?)

1 个答案:

答案 0 :(得分:3)

设置margin 0 auto时,您使用的是简写形式的属性:

  • margin-top: 0
  • margin-right: auto
  • margin-bottom: 0
  • margin-left: auto

在flexbox中,auto边距沿其定义的方向占用了所有空间。因此margin-left: automargin-right: auto将消耗弹性项目两侧的所有可用空间,从而使项目居中。

如果您只想使文本居中,则不要在弹性项目上使用auto边距,而是将实际文本居中:

代替此:

div { margin: 0 auto; }

尝试一下:

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

body {
  margin: 0;
  padding: 0;
}
<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; */
    display: flex;
    justify-content: center;
    text-align: center;
    ">
    Why does this not span 100% width<br/>like any block elem would?
  </div>
</div>

更多详细信息: