Css3 Flexbox: Display: Box VS. Flexbox VS. Flex

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: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'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.}

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/

Grid vs Flex for implementations of Holy Grail-like layout

Given your implementation details, I would say that the only difference is semantic. The three options will work well, for your use-case I think the grid is the one I would go since it's easy to see what's happening on the different layouts.

Looking side by side at both declarations its very clear how the layout works:

"header header" "sidebar main" "footer footer"
"header header" "main main" "footer footer"

I don't see a clear benefit in using options 2 or 3 given this use-case.

An important thing to have in mind is how grid behaves compared to flex:

Grid is Container-Based, Flexbox is Content-Based

In flexbox layout, the size of a cell (flex-item) is defined inside the flex-item itself,
and in the grid layout, the size of a cell (grid-item) is defined
inside the grid-container.

Source: https://www.webdesignerdepot.com/2018/09/grid-vs-flexbox-which-should-you-choose/

Depending on how you want your layout to behave, how it adapts to different screen resolutions or different content this difference is good to have in mind. Again I think grid will give more options in this regard.

---

Related Topics