What Are the Differences Between Display:Box and Display:Flexbox

What are the differences between display:box and display:flexbox

It looks like at this time good information is not available. I will update this post if and when I find good information.

Update: (2/20/2012) caniuse.com now shows the browser support for both the new and old versions of the Flexible Box Layout Module

Update: (8/7/2012) Chris Coyer has put together a nice article about how to tell the difference between the new and old syntax. http://css-tricks.com/old-flexbox-and-new-flexbox/

What's the difference between display:box and display:flexbox in css3

According to this source the specs have changed:

The Working Draft has undergone changes to much of the syntax used in the flexbox model. For example:

display: box; 

This will become:

display: flexbox;

Both versions of the syntax work (at least in chrome). The reason why the layout looks different if you change the display style is because you have to change -webkit-flex-pack: center; to -webkit-box-pack: center; when you use display: -webkit-box;

So this is equivalent to your css style from above and should produce the same layout:

.flexbox {
    display: -webkit-box;    
    -webkit-flex-box: center;
    -webkit-flex-box: center;
    width: 50%;
    height: 100px;
    background: orange;
  }

What are the differences between display:box and display:flexbox

It looks like at this time good information is not available. I will update this post if and when I find good information.

Update: (2/20/2012) caniuse.com now shows the browser support for both the new and old versions of the Flexible Box Layout Module

Update: (8/7/2012) Chris Coyer has put together a nice article about how to tell the difference between the new and old syntax. http://css-tricks.com/old-flexbox-and-new-flexbox/

CSS3 Flexbox: display: box vs. flexbox vs. flex

These are different styles.

display: box; is a version of 2009.

display: flexbox; is a version of 2011.

display: flex; is the actual version.

Quote of Paul Irish

Warning: Flexbox has undergone some major revisions, so this article
is out of date. In summary, the old standard (Flexbox 2009), which
this article is based on, was implemented in Chrome since v4, Firefox
since v2, and IE10 beta.

Since then, the new flexbox standard debuted and started to debut in
Chrome 17. Stephan Hay has written a guide on the new flexbox
implementation. Since then, the spec underwent naming changes which
started landing in Chrome 21. Chrome 22 has a stable implementation of
the latest spec.

At this point, implementing either has its risks, so be aware.

Here is the blog about the different flexbox statements.

This is a blog entry by css-tricks about the different versions.

When i use flexbox, i always write it like that:

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

Edit:

Still not everyone has a browser/device capable of viewing flexbox layouts. So for fallback solutions or alternatives there is this article by Kenan Yusuf on how to use flexbox without using flexbox.

Flexible box model - display : flex, box, flexbox?

You use whichever ones you need for the browsers you need to support.

display: box

• Firefox 2.0? (prefixed)
• Chrome 4.0? (prefixed)
• Safari/iOS 3.1? (prefixed)
• Android 2.1 (prefixed)

As far as I can tell, wrapping via box-lines: multiple is not implemented in any browser.

display: flexbox

• Chrome 17-?? (prefixed)
• Internet Explorer 10 (prefixed)

display: flex - the current standard

• Chrome 21 (prefixed), 29 (unprefixed)
• Opera 12.1 (unprefixed), 15 (webkit prefix)
• Firefox 22 (unprefixed)
• Safari/iOS 7 (prefixed)
• Blackberry 10 (prefixed)
• Internet Explorer 11 (unprefixed)

http://caniuse.com/#feat=flexbox (Note that IE10 is the only browser marked as having partial support that supports wrapping)

The specs for flexbox and flex are similar enough there's no reason not to include both, especially since IE10 only supports the flexbox spec. The spec for box is very different and might not be worth including depending on the effect you're after, even though nearly all properties have an analog to the ones found in the flexbox/flex specs.

You may find that there are some browsers that support multiple specs. There will likely come a time where they will drop support for the older spec, so always make sure you include the flex properties.

What's the difference between display:inline-flex and display:flex?

display: inline-flex does not make flex items display inline. It makes the flex container display inline. That is the only difference between display: inline-flex and display: flex. A similar comparison can be made between display: inline-block and display: block, and pretty much any other display type that has an inline counterpart.¹

There is absolutely no difference in the effect on flex items; flex layout is identical whether the flex container is block-level or inline-level. In particular, the flex items themselves always behave like block-level boxes (although they do have some properties of inline-blocks). You cannot display flex items inline; otherwise you don't actually have a flex layout.

It is not clear what exactly you mean by "vertically align" or why exactly you want to display the contents inline, but I suspect that flexbox is not the right tool for whatever you are trying to accomplish. Chances are what you're looking for is just plain old inline layout (display: inline and/or display: inline-block), for which flexbox is not a replacement; flexbox is not the universal layout solution that everyone claims it is (I'm stating this because the misconception is probably why you're considering flexbox in the first place).

---

¹ _{The differences between block layout and inline layout are outside the scope of this question, but the one that stands out the most is auto width: block-level boxes stretch horizontally to fill their containing block, whereas inline-level boxes shrink to fit their contents. In fact, it is for this reason alone you will almost never use display: inline-flex unless you have a very good reason to display your flex container inline.}

Difference between flex display property and block display property

At first glance they look similar, but they are not...
The key is that display: flex has access to the flexbox model feature. To check this in action, you can add to .flex class selector two properties: align-items: center; and justify-content: center;

• display block "The element generates a block element box, generating line breaks both before and after the element when in the normal flow." MDN

• display flex "The element behaves like a block element and lays out its content according to the flexbox model." MDN

Should I ever use display: block, or should I always use display: flex?

They are different box layout models. All are valid, and each one has its own advantages and disadvantages.

Neither block nor inline-block are outdated. You can still use them, and the CSS working group is still adding new features that you can use with these old layouts.

only significant disadvantage of flexbox was browser compatibility

That's false, flexbox has multiple disadvantages, like lack of floating and lack of multicolumns:

Flex layout is superficially similar to block layout. It lacks many of
the more complex text- or document-centric properties that can be used
in block layout, such as floats and columns. In return it gains simple
and powerful tools for distributing space and aligning content in ways
that web apps and complex web pages often need.

Does that mean that if it doesn't need flexbox properties I should just use display: block

Flexbox may still work, even if you don't need flexing. But in that case I would discourage it. Block layout is simpler, which might mean browsers can render it faster.

---

Related Topics