CSS - Difference between display:(inline|block) and display:box?

Question

I am confused. I have just discovered this CSS property: display:box; I do not understand what it brings to CSS that was not already possible with display: block, inline, inline-block.

Anyone can enlight me on this ? Thanks in advance.

Answer 1

It's part of the new flexbox module. From the working draft:

In the flexbox layout model, the children of a flexbox can be laid out in any direction, and can "flex" their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.

It's still a draft specification, but worth playing with until it's fully implemented by browsers. It will probably allow us to get rid of floats in many cases!

Please note that display:box is already deprecated in favor of display:flexbox.

Last but not least: do not rely on w3schools!