2

This occurred when using Zurb Foundation's XY grid but actually is a vanilla CSS Flex question; consider the following code:

<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)

Why does the bottom div in its X-axis only takes as much width as needed by its content instead of taking the full width like any block element would normally do; and what should I do in order to achieve this (something better than settings its width to 100% maybe?)

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Adrian Föder
  • 770
  • 1
  • 7
  • 22

1 Answers1

3

When you set margin 0 auto you are using a shorthand property to say this:

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

In flexbox, auto margins consume all space in their defined direction. So margin-left: auto and margin-right: auto will consume all available space on either side of the flex item, therefore centering the item.

If you simply want to center the text, then instead of auto margins on the flex item, center the actual text:

Instead of this:

div { margin: 0 auto; }

Try this:

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>

More details:

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • I can't see the value of adding `display: flex; justify-content: center;`, `text-align: center` is enough, right? – Asons Jul 16 '18 at 19:52
  • Hi @LGSon, yes, that is likely true. Using flex properties may be useful in the event the OP wants vertical centering, as well. – Michael Benjamin Jul 16 '18 at 19:55
  • Hi ... right, and I was about to add, _unless they add a child element that of course_. – Asons Jul 16 '18 at 19:58