Need to layout your CSS? Emily Meroni and Giorgia Baroffio are giving a talk at Voxxed Days Ticino about Flexbox. We asked them what this is, and when you’d use it.

 

What is Flexbox and what problems does it solve?

Flexbox is a layouting model introduced by CSS3 quite some time ago which has currently reached a very good level of browser support and stability.
Thanks to Flexbox, developers can now easily create layouts in pure CSS that were simply complicated or impossible to achieve before.

Some of the most handy features are:

  • To let the container establish the horizontal and vertical alignments for its children.
  • Distribute items by optimizing the amount of space required.
  • Position elements one next to each other automatically.

Flexbox solves the possibility of having a set of elements that stretch and fill up all the available height of their parent, or arbitrarily change the visual order of flex items when needed.

Does CSS Grid replace Flexbox?

Grid is a very powerful 2-dimensional layout system, meaning it is intended to layout items in both columns and rows. Flexbox is suitable for 1-dimensional layouts. You can still achieve some 2-dimensional layouts using Flexbox. However it could require more CSS properties and additional HTML elements to wrap items.

On the other hand, you can use Grid for 1-dimensional layouts. Again you would need more CSS properties. This could overcomplicate something that you could easily achieve with just one property when using Flexbox.

So, why not exploit what Flexbox and Grid are good at? They are intended for different purposes so they should possibly be used together, not as alternatives.

Is the syntax quite intimidating for beginners? What are some simple tasks that people can start applying Flexbox to on existing sites?

The syntax used for Flexbox is quite unusual and it requires some time to wrap your head around it. This is also true for those who are confident writing CSS. However the time invested in learning it is very well spent. It empowers you to achieve so much with very little effort.

We would advise people who would like to use Flexbox on their websites to replace layouting solutions which have been compromised by hacky code (especially ones that require some JavaScript) with pure CSS code.

To immediately see Flexbox’s advantages in action, try and replace floats used to put elements side by side with a flex container: not only it is recommended but it is also far more efficient performance-wise.

 

For more on Flexbox, see Emily and Giorgia’s talk at Voxxed Days Ticino:

Ticino