This is an article I wrote in 2015, beware It’s real old nowadays.
Take a look at my portfolio, there you will find links for multiple jobs I’ve done over the years and more articles too.
Are you also interested in videogames? Take a look at this article I wrote about It:
If you’ve read anything about at least one of these new specifications, you may have been in doubt. Which one will I use on my code?
Yet, if you dogged deeper, you discovered the difference between them. In this article, we will take a closer look at both, their differences, when and why utilize any of them, in your application.
Flexbox
What is It and what is the goal?
The concept of “flexible boxes” is to write responsive layouts on a better way, with more dynamism on the code, to make It easy to modify later and adapt elements depending on the screen size (being that last one the biggest Flexbox target).
For us to get started with Flexbox, It’s necessary to know that there are actually two specifications on It, the old one (2009 syntax) and the new one (2011 syntax).
The 2011 syntax is the one that should be used, being the most recent and better developed.
How to apply on the Front-end code?
The goal of this article isn’t to show the utilization on practice, but I’ll pass some useful links for learning more, otherwise there would be no fun, right?
Useful links
Complete guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
One more guide: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
Simplified guide: http://learnlayout.com/flexbox.html
Can I use It?
Yes! or almost :/ (2020 time machine spoiler: Yes, you can now!)
After knowing what It is, we will need to know what browsers support It, to know if we can use It.
Browsers that are NOT ANYMORE (take that, 2020!) utilized today that do not support the specification (with the new syntax):
IE 8–9 (besides version 10, that supports only partially)
Android Browser 4.1–4.3
So, are you gonna be limited by 8,34% (now finally less than 1,2% to all internet explorer versions) of internet users (caniuse stats)? In many cases, you will have to, of course, but It’s always good to consider Flexbox, as well as other new CSS and HTML properties.
Grid Layout
One more time: What is It and what is the goal?
So, Grid Layout is a recent specification and is not even ready yet, being always updated.
Back in the old days, every website layout was defined by tables. Everything was made with HTML, which means that websites were big freaking tables. That was awful, because HTML semantics basically did not existed. The styles were made with HTML structure.
Today, we got rid of tables (only using them where they should be used). We make the styles on CSS, on an organized, clean and semantic way.
But how we do It, on CSS, It’s a little bit complex to make good alignments. What always happens is we use some grid system (from some framework) to work on a more simple, clean and organized way.
With Grid Layout, more flexible and organized code will be possible, on a native way with CSS only.
In practice
Useful link:
Complete guide: https://css-tricks.com/snippets/css/complete-guide-grid/
But… can I use It?
No, we still can’t (oh wait! It’s that time machine again, YES, we can use it now). The specification is now ready and browsers have implemented It.
Making a team with Flexbox and Grid Layout
To understand when to use each of these, we need to know the difference between them.
You can think It’s weird: But why are there two specifications to alignment that are pretty similar, on CSS3?
What happens is, we won’t pick one of them and start using on our applications. In practice, we can use both together to have a better code. To do that, we will use Grid Layout for external areas. The general website structure (header, body, navbar, footer), for instance.
That way, we use Flexbox to make components (elements that will go inside our website structure).
If you have any questions about It, you can leave a commet bellow.
What can we make of all that?
Both specifications are relatively new. Grid Layout is still unstable and without browser support so we cant implement It on our applications (not anymore in 2020!).
On the Flexbox side, we can consider, but some browsers don’t have support yet (in 2020 It’s irrelevant, again, we can use it).
If, for some reason, you don’t want to use Flexbox and Grid Layout in 2020, the second best thing is to utilize grids from frameworks, build your own, or even don’t use any grid (not recommended).
Final words: In 2020, you can and should use Flexbox and Grid Layout :)
