Toptal felexbox
Cyber

Build CSS-only Smart Layouts with Flexbox

Photo : Toptal.com

Flexible box, or Flexbox in short, is a set of properties in CSS introduced in 2009 to provide a new, exceptional layout system. The Flexbox module is identified as a part of the third version of CSS (CSS3).

You are probably already using many of the new properties in CSS3, such as box-shadow, border-radius, background gradients, and so on. However, Flexbox has yet to see the widespread adoption that it deserves. This may be because of all the breaking changes it has suffered over the years, or because it is only partially supported in Internet Explorer 10, or just because Flexbox is a whole ecosystem while previous paradigms have been predominantly based on single, ready-to-go properties.

It is super powerful and offers a wide range of options to achieve layouts that, previously, could only be dreamed of.

This article will walk you through the basics of Flexbox and how you can use it to achieve some really cool layouts which would otherwise require complicated CSS hacks or even JavaScript.

Why Use Flexbox?

By default, HTML block-level elements stack, so if you want to align them in a row, you need to rely on CSS properties like float, or manipulate the display property with table-ish or inline-block settings.

If you choose to use float (left or right), you must clear the wrapper at some point to push it until the very last floated element, otherwise, they will overflow over anything coming after. However, with float, you are limited to organizing elements horizontally.

Alternatively, or in addition, you can manipulate the display property to try to achieve the layout you desire! But this often feels kludgy at best, not to mention tedious, and often results in a fairly fragile layout that won’t necessarily render consistently across browsers. This approach is particularly ineffective if you are targeting multiple devices of varying sizes—which is almost always the case nowadays.

Enter Flexbox!

With a simple rule applied to a parent element, you can easily control the layout behavior of all of its children.

With Flexbox, you can:

  • Reverse the order of the elements inside a Flexbox parent.
  • Wrap child elements in columns (number of columns can vary depending on child and parent height).
  • Specify the rate at which elements grow or shrink while the viewport size changes.
  • Control whether elements are shrinkable or not, regardless of the specified width unit type (relative or absolute).
  • Change the order of elements with CSS (combine this with media queries and you will find limitless possibilities in your flow).
  • Generate complex distributions of the elements to be equidistant with space around or just space between.
  • Generate “renegade” elements that flow differently (everyone to the left but one to the right, top/bottom… it’s your call).
  • And, most importantly, avoid the clear-fix hack for good!

I understand Flexbox can be tough in the beginning. I think it is easier to learn ten unrelated CSS properties than five with some inter-dependency. However, with your current CSS skills, and maybe a little help from this article of Toptal, you will launch yourself into a new CSS universe.

Toptal
Total is an American tech freelancing community. Nerdynaut and Toptal has an article publishing partnership.
  • Fascinated
  • Happy
  • Sad
  • Angry
  • Bored
  • Afraid
Build CSS-only Smart Layouts with Flexbox
1 Comment

1 Comment

  1. Hertha

    May 5, 2017 at 12:25 pm

    Hi there, I found your blog via Google while looking for a related topic, your website came up, it looks great. I have bookmarked it in my google bookmarks.

Leave a Reply

Your email address will not be published. Required fields are marked *

advertise at the community of higher education
To Top