Toptal felexbox

Build CSS-only Smart Layouts with Flexbox

Photo :
Want create site? With Free visual composer you can do it easy.

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.

Irina Papuc
Irina is a guest contributor from Toptal.
Did you find apk for android? You can find new Free Android Games and apps.
  • 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 *

Most Popular

​Disclaimer : Nerdynaut is a tech company which consists of professionals in respective academic fields in its functional team facing challenging roles to quench the thirst of knowledge in cyberspace. Every article and majority of artworks in this website are copyright of Nerdynaut 2017. After a written permission from the publisher, the original content can be reused or referred for promotional work of education without any modification. Expressions of mass media with intentional harm on Nerdynaut brand may be liable to criminal prosecution and civil claims for the damages caused.
Protected by Copyscape
* = required field

Copyright©2014-2017.The Nerdynaut. All Rights Reserved. A game-changing subordinate of Naut's Capital.
Made in Sri Lanka.

To Top