Logo Stamkracht

Flexbox: Tables going crazy

This is what you’ve been waiting for your whole life! The product you always wanted, the missing key in your life. Try it now, and you’ll never want to return.

No, this isn’t your average tell sell advertisement. However, what this blog is about will be just as cool, if not more. Ever heard of tables going crazy? Also known as:

Flexbox

Of course, flexbox isn’t really tables going mad. Although if you’re familiar with the struggles that come with tables, it sure feels like you’r going mad sometimes. Flexbox is here to change everything. The name says it all: flexible boxes! This means: No more struggles to get that table right, and no more spaghetti in your html.

Officially, flexbox is called the Flexbox Layout. It is currently a Last Call Working Draft by the W3 standards. However, browser support isn’t much of an issue. For all current versions, only safari and blackberry need the webkit vendor prefix. Internet Explorer supports flexbox partially from version 10 with the ms vendor prefix, and fully from version 11. As long as you don’t have to support < IE10, you’re good. So, what is flexbox?

Flexbox is a layout type, just as ‘block’, ‘inline’, ‘table’ and ‘positioned’. Block, inline, table and flexbox can be set through the display property. Positioned elements are those with a position property, such as ‘absolute’.

Flex layout is superficially similar to block layout. It lacks many of the more complex text -or document- centric properties that can be used in block layout, such as floats and columns. In return it gains simple and powerful tools for distributing space and aligning content in ways that webapps and complex web pages often need.

To use flexbox, you need two types of elements. A flex container, and the actual flex items. Best practice is to use block elements, such as div’s, sections etc. Flex items behave like block items, apart from the lack of some complex properties like floats, which you won’t need at all so don’t worry about them!

To activate the magic, all you have to do is add display: flex; on the container element. Awesome right? Wait until you start defining more magic. Let me explain some properties that are part of the flexible layout.

Flex-direction

With flexbox it’s easy to change the direction of your items. You can either chose to show your items in rows or in columns, or rows/columns reversed.

Flex-grow

Use flex-grow on your items to make it bigger/smaller then the others. 0 is the default value. However, the integer is relative to the values on other items. If you set all your items to 1, except one, the value will shrink.

Flex-shrink

Surprise surprise: This does the same as flex-grow, only the other way around. Use larger numbers to make items shrink. This is especially useful when shrinking only a few items, opposed to growing the rest.

Flex-basis

This defines the default size of an element before the remaining space is distributed. The main-size value makes it match the width or height, depending which is relevant based on the flex-direction.

flexbox

Flex

This is the shorthand for flex-grow, flex-shrink and flex-basis all together. The flex-shrink and flex-basis parameters are optional. The default value is ‘0 1 auto’. It is recommended that you use this shorthand property rather than set the individual properties, because the short hand sets the other values intelligently.

These flex properties create a lot of possibilities to create a lot of nice features, which would be a lot harder to create without the flex layout. Keep in mind all those properties are animatable, so you can create fancy effects.

For all properties and values in a handy cheatsheet, I’d recommend to take a look at this image by Joni Trythall, which explains the best coding-route to take and which properties to use when.