Day20 of #100daysOfCode
Focus: Flexbox.
Taking an overview of flexbox from Netninja course.
Building a good website requires taking painstaking care in positioning elements. Such properties like position: relative or absolute which takes values are used for positioning to get elements where we want them to be.
To create Grids, one needed the float property, even for layouts or navigation systems, the float property was the ideal thing.
The fixed height property was needed for giving columns same height.
These methods are tiring and have their plenty downsides.So this is where the CSS flexbox comes in.
What the flexbox?
‘Flexbox is a CSS display type designed for crafting CSS layouts much easier’.
With CSS flexbox you can easily control the position, size and spacing of elements relative to each other and to their parent element.
And the better part? It works great responsively.
Basically flexbox works like so: Take an element such as a div, give it a classname or id, then give a display property of flex and that is all, every of its direct children becomes flex elements and essentially becomes more flexible and we can basically control how they shrink and how they grow as well give the spacing between them.
Some benefits of using flexbox:
- Helps to create navigation bars and menus very easily without having to use floats or worried about collapsing elements.
2. We can also create Grid elements really easily and Bar charts too.
3. Again creating equal height columns becomes easier with flexbox.
For browsers which do not fully support flexbox such as IE8, we use modernizr. A modernizr is a javascript library that basically dictates which browser a user is using to view your site. And when it dictates that the browser does not support flexbox, it creates classes which we can use to style the elements specific to that web browser.
In conclusion I’ll advise that you use CSS flexbox in your next project.
