Menu
The basic difference between CSS Grid Layout and CSS Flexbox Layout is that flexbox was designed for layout in one dimension - either a row or a column. Grid was designed for two-dimensional layout - rows, and columns at the same time.
Block: Displays an element as a block element. It starts on a new line and takes up take up as much horizontal space as they can. Block-level elements do not appear in the same line, but breaks the existing line and appear in the next line. Flex: Flex displays an element as a flexible structure.
CSS grid is for layout, flexbox is for alignment We should aim to use both of them together, but for different purposes. For your layout, use CSS grid, for alignment of your elements, use flexbox.
The Flexible Box Module, usually referred to as flexbox, was designed as a one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities.
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.
The specification has been through many iterations, see 2009, 2012, 2013 and each time the value was changed. display: flex; is the latest.
It is still a draft specification so any current implementation may still change.
display: flex; Is latest and better version currently we can use that in our code.
So go for that.
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