Menu
Many of us are aware today that the older values of the display property like inline and block are outdated after the new flexible box model has been introduced in CSS3. But, we might find different information on the web in the same flexible box model.
We might find mainly 3 different values of the display property namely flex, box and flexbox. What is the difference between these three flexible box models and which one to use?
594
The flexbox cross axis is always perpendicular to the main axis. A flex layout can also wrap in multiple rows or columns and flexbox treats each row or column as a separate entity, based on its content and the available space. On the other hand, CSS Grid lets you work along two axes: horizontally and vertically.
If you use the two-value display syntax, which is only supported in some browsers like Firefox, the difference between the two is much more obvious: display: block is equivalent to display: block flow. display: inline is equivalent to display: inline flow. display: flex is equivalent to display: block flex.
The two browsers you should still keep in mind for cross-browser compatibility are: Internet Explorer 10, which implemented the display: flexbox version of the specification with the -ms- prefix.
Flex items within a flex container can be laid out either horizontally or vertically, but not both. If you want to lay out items in both dimensions, you'll need to nest a flex container inside another one.
You use whichever ones you need for the browsers you need to support.
display: boxAs far as I can tell, wrapping via box-lines: multiple is not implemented in any browser.
display: flexboxhttp://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.
63
As far as I know, the above three different versions of the flexible box model can be classified by their ages.
display: box - This was the first flexible box model that was accepted as the newest model around the year 2009. Don't use it.
display: flexbox - This flexible box model came in the year 2011 which was still in its development. Don't use it.
display: flex - This is the newest flexible box model that currently finds its place as the latest box standard. This might further undergo some changes but this is preferred to the other two standards.
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
