DragonI

• live demos
• code snippets
• definitions from the W3C Flexbox specification

The display property is one of the most important CSS properties we use for layout. Most of us would have used block, inline and none. table and inline-block are also quite common. The new darling is definitely flex, because it’s a display property that was created specifically for layout. The upcoming grid (currently still being actively worked on) is another layout-specific property that we’ll soon have in our arsenal as well.

Those we know quite well already

New kids on the block

• display: flex;
• display: grid;

The relatively obscure and experimental

• display: run-in;
• display: ruby;
• display: contents;

Through my experience of building various responsive designs, I learnt a

Flexbox is awesome, but it introduces many new concepts that can make it difficult to use. These interactive examples will show you practical ways to use it to build UI components. They start out simple and get more complex near the end. You can start using these patterns in your own code right away, though I recommend you apply accessibility best practices to the markup (like using semantic HTML5 elements).

The JavaScript is now written in ES2015, which means if you consume the js/ folder of the Foundation package as part of a build process, it will need to be transpiled using Babel. There are many ways to use Babel, including plugins for every build system imaginable.

Note that this doesn't change anything about how you write JavaScript. You can use the new ES features if you want, or you can keep writing code how you always have.

Color Palette

We created a new wrapper around the color variables like $primary-color, $secondary-color, and so on, called $foundation-palette. Adding new colors to this palette allows you to change what CSS classes buttons, callouts, labels, etc. use to change colors.

Flexbox Mode

Users of the flex grid will likely want to switch their project over to flexbox mode, which converts a handful of float- and table-based components to use display: flex instead.

To upgrade to flexbox mode:

1. In your settings file, add a variable $global-flexbox and set it to true.
2. In your main Sass file, add @include foundation-flex-classes; below all other Foundation components.
3. If you're using the current flex grid alignment or source ordering mixins, replace them with the new generic flexbox mixins:
4. If you're using vertical alignment classes on flex columns, replace those classes with the new generic flexbox classes:

• Replace flex-grid-order() with flex-order().
• Replace flex-grid-row-align() with flex-align().
• Replace flex-grid-column-align() with flex-align-self().
• Replace .align-* with .align-self-*.