Why is width handled differently in flexbox?

Question

I've been playing around with display:flex lately as I see it becoming more trending. In a quick test, using flex and non-flex CSS approaches, I realized, my widths, and margins are always respected when using flex. Is this a good approach considering that I will most likely need a gutter between elements anyway? Moreover, where is the margin between spans coming from? This is what I mean:

HTML

<div class="container">
  <div class="box">
    <span class="inner-box">This gives me a 30px X 60px</span>
    <span class="inner-box">This gives me a 30px X 60px</span>
    <span class="inner-box">This gives me a 30px X 60px</span>
  </div>  
  <div class="box2">
    <span class="inner-box">This gives me a width larger than the specified 30px</span>
    <span class="inner-box">This gives me a width larger than the specified 30px</span>
    <span class="inner-box">This gives me a width larger than the specified 30px</span>
  </div>  
</div>

CSS

.box{
  background: orange;
  display:flex;
  flex-direction:row-reverse;
  padding:0 10px;
}

.box2{
  background: green;
  text-align:right;
  padding:0 10px;
}

.inner-box{
  width:30px;
  background:#fff;
  margin:0 0px;
}

Notice the widths at runtime

DEMO

What is the question exactly? If `display:flex` honors `width`, where `display:inline` doesn't? If so, the answer is yes, but that wasn't very clear. — Mr Lister, Jan 02 '16 at 15:36
@MrLister, you are right, I missed to add the main question I have about this. I was in a rush when I had to post this. I edited — LOTUSMS, Jan 02 '16 at 19:05
In your pen you have `.box2 span { display: inline-block }`, and the space between them is explained in [How to remove the space between inline-block elements?](http://stackoverflow.com/q/5078239/1529630). In your question you don't have that, so they have the default `display: inline`, so they ignore `width` as explained in [Setting the width of inline elements](http://stackoverflow.com/q/1423294/1529630). Your question is a dupe of one of these. — Oriol, Jan 03 '16 at 20:58

score 4 · Accepted Answer · edited May 23 '17 at 10:28

You are using <span> elements. They are inline by default. The width is automatically ignored for inline elements.

In the first div section (.box), however, the span's inline display value is overridden by the parent's display: flex, which establishes a flex formatting context. Hence, all children become flex items, which respect width and height.

Flex Items

A flex item establishes a new formatting context for its contents. The type of this formatting context is determined by its display value, as usual. However, flex items themselves are flex-level boxes, not block-level boxes: they participate in their container’s flex formatting context, not in a block formatting context.

^{source: https://drafts.csswg.org/css-flexbox-1/#flex-items}

In the second div section (.box2), the span elements remain display: inline, as they are not removed from the block-formatting context, and any width and height assignments are ignored.

Try display: inline-block: http://codepen.io/anon/pen/yeggOy

References:

This is a great and detail answer. I was looking for something like this to clarify the differences but to be the devil's advocate here. I tried display:inline-block and although it respected the width, it overflowed the text and still added the margins, unlike display flex — LOTUSMS, Jan 02 '16 at 18:59
The whitespace you're seeing is a natural feature of `inline-block` elements. Here's the [**explanation**](http://stackoverflow.com/a/32801275/3597276). Using one (of several) methods for removing the whitespace, here's your [**revised demo**](http://codepen.io/anon/pen/OMWpNV). — Michael Benjamin, Jan 02 '16 at 19:06
font-size:0 !!!!! Who would've thought the font would have anything to do with this? Now, that, is a very interesting concept! — LOTUSMS, Jan 02 '16 at 19:10

score 2 · Answer 2 · answered Jan 02 '16 at 16:01

2

Your question is a little unclear but if, as MrLister commented:

If display:flex honors width, where display:inline doesn't? If so, the answer is yes,.

This is because, per the spec,

Flex items paint exactly the same as inline blocks

and so are affected by width statements.

answered Jan 02 '16 at 16:01

Paulie_D

107,962
13
142
161

The cool thing about your link reference (aside from the `inline-block` comparison) is that it highlights something probably not commonly known: flex items can use `z-order` without being positioned. – Michael Benjamin Jan 02 '16 at 16:35
This interesting. Considering z-ordering can be a rescue sometimes but positioning can lead to more adjustments – LOTUSMS Jan 02 '16 at 19:01
I was in a rush when I posted, so I edited the question. But mainly my question is regarding to how are the widths handled and more importantly, where is the margin coming from? – LOTUSMS Jan 02 '16 at 19:06

Why is width handled differently in flexbox?

2 Answers2