Day20 of #100daysOfCode

Ugwuanyi Chidera
Sep 7, 2018 · 2 min read

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:

  1. 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.

Ugwuanyi Chidera,

chibueze ukaegbu.

LearnFactory Nigeria

At LearnFactory we Train proficient software, Outsource them for development work around the world and build software solutions for clients.

Ugwuanyi Chidera

Written by

LearnFactory Nigeria

At LearnFactory we Train proficient software, Outsource them for development work around the world and build software solutions for clients.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade