An Intro to the CSS3 Flexbox Layout Module

An Intro to the CSS3 Flexbox Layout Module

By Henry Mesias
November 24, 2015
Development

What is Flexbox?

There is a relatively new CSS3 Flexbox Layout Module (aka “Flexbox”) that is changing the way we approach layouts in CSS. Flexbox works especially well in small scale layouts or when used for applications.

“The CSS3 Flexible Box, or Flexbox, is a layout mode providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices. For many applications, the flexible box model provides an improvement over the block model in that it does not use floats, nor do the flex container’s margins collapse with the margins of its contents.” -Mozilla Developer Network

The predictability of what the Flexbox layout can do is extremely helpful when designing websites with mobile browsing in mind. In this post I highlight one of my favorite features about Flexbox, which is the ability to easily control and change the order of elements when optimizing a window for mobile.

The embedded code pen example below shows you how easy this can be done.

See the Pen Flexbox Ordering by Henry Mesias (@henryhankdc) on CodePen.

Notice the position of the primary navigation and bread crumbs. Using a media query to change the position and order of the primary navigation at a maximum width of 600px. The primary navigation drops to the bottom of the page and the bread crumbs stay at the top.

There’s no need to add or change any classes. simply indicate the order:

@media (max-width: 600px){
    .Breadcrumbs { order: 0;}
     nav { order: 1;}
     footer { order: 2;}
}

Yes. It’s just that easy, and the best part is your code looks clean.

A Few Other Important Notes About Flexbox:

Bootstrap:
Everyone’s favorite framework for building responsive websites now has opt-in flex box support. Bootstrap 4 makes Flexbox layouts easy.

Cross Browser Compatibility:
The one downside to using Flexbox is that it is not 100% compatible across all browsers, BUT we are almost there. According to caniuse.com, Flexbox is 95.4% globally compatible. Don’t let this stop you from using Flexbox in your CSS! To capture that last 4.6% you just need to do two things.

Use browser pre-fixes
Use fall-backs to support older browsers

.parent{
    display:table;
    display:flex;
}

.child{
    display: table-cell;
    width:20%;
    flex: 1 0 20%;
}

Learn More:

Want to learn more about Flexbox? Check out these great resources, or contact us today for more information.

Jake Intel