Understanding CSS3 Flexbox for Responsive Design
Most developers are familiar with CSS floats and clearfix hacks to get proper multi-column layouts. These are still in use today because they work and have great support among a variety of browsers. However in 2009 a new display style named flex appeared on the map.
Since then flex has undergone a few changes to reach its current iteration. Theflex value is an alternative to block elements floated and manipulated using media queries.
Instead developers can build a flexible container, flexbox for short. It’s great for mobile screens and responsive content for dynamic layouts and webapps. This guide will cover the fundamentals of CSS flexbox usage and some helpful resources for digging deeper into the topic.
What is the Flexible Box?
The flexible box layout is a way of using CSS’s display property in a whole new manner. Block elements stack vertically while inline elements stack horizontally(until they break onto a new line).
Flexbox elements can stack vertically or horizontally based on your setup. They can be evenly spaced across the page or squeezed tight up against each other. The point is offering more control to developers who want to build naturally responsive layouts.
Any element referenced as a flexbox is a container element. This container holds internal elements known as flexbox items. I recommend skimming the first part of this Mozilla Dev Network article for details.
The display: flex container may have a fixed or fluid width, but it makes sense to leave it fluid, so the content adapts with the page. The internal elements are not given specific width values but instead display based on proportions.
The above video does an excellent job of explaining the details. In short, you use a CSS property named flex to define a ratio between boxes (mostly HTML div elements). flex: 1 represents a 1:1 ratio where each internal flex item displays at the same width regardless of screen resolution.
The Keys to a Flexbox Layout
Naturally the first important part of a flexbox is the container itself. This container is given display:flex so its children behave in the expected manner.
Items inside the flexbox can flow vertically or horizontally by using theflex-direction property. This takes a value of either row or column with reverse options as well. Note this property is applied to the parent, not the children.
Another important property is justify-content which also applies directly to the parent. This defines how space behaves when internal elements don’t fill the container. Flexbox elements can be centered, aligned left/right, or spaced evenly as appropriate. Check out the Codrops reference for more info.
Description: 02-flex-justify-content-design-style
Both of these properties are crucial when customizing a flexible container. But you also need to setup properties for defining how internal elements should behave.
Flexbox uses the flex property which is shorthand for a few different settings. CSS flex can take three options which individually define flex-grow, flex-shrink, and flex-basis.
The first two properties define the growth and shrink ratios for internal items.
Values are unitless so flex: 1; is valid syntax. The value of 1 would define each box at a flexible value of 1 ratio based on all other boxes.
At first this property may seem confusing but with practice and live examplesyou’ll come to realize how it all works. The shorthand property flex is really how you structure sizes and behaviors of internal content boxes.
The only part of flex that takes a unit is flex-basis. This optional setting defines the internal box’s default size(width if row, height if column). By default it’s set to 0 but you can choose anything with any unit from pixels to rems.
If you want a complete guide of the major flex properties check out this post on CSS-Tricks. It covers all the main properties and how they function in the browser.
When you first read that flex has no units it can seem daunting. But the best way to understand how this works is by analyzing a bit of code.
Flexbox Examples in CSS
The flexbox model has gone through a series of changes with revisions and simplifications of code standards. Be aware that some tutorials and live demos may use outdated syntax and require some updates before use on another project.
Take a look at the below CodePen snippet made by Chris Coyier. It’s a bare-bones basic layout with a fixed center container bookended by two fluid containers. The fluid containers only need a single line to define their behavior:flex: 1.
If you want a more diverse example check out this flexible layout on CSSDeck.
The main content box is flexible while other columns are fixed. Resizable elements remain fluid until the sidebar column eventually breaks down.
Everything in that sample layout is built using flexbox. There are no floats, there are no media queries. This square grid snippet illustrates the same point that responsive flexbox layouts do not require media queries.
But perhaps one of the coolest uses for flexbox is vertical & horizontal centering. Web designers have always used margin: 0 auto for horizontal centering with a fixed width. But flexbox allows both vertical and horizontal centering on a fluid-width container. I know, crazy junk.
These examples only touch the surface of what’s possible with flexbox. You may want to jump in and start dropping flexbox layouts into every new project - but it’s a good idea to first learn which browsers fully support this technique.
Description: tuts_logoTuts+ have published a flexbox video course, entitled CSS: Flexbox Essentials, that will show you all the fantastic things Flexbox can do, from setting up rows and columns, to understanding the properties of Flexbox.
Common Usage & Support
The modern flexbox specs have been updated many times since the original release in 2009. Current 2015 specs have been adopted by all modern browsers including Internet Explorer.
But the problem of common usage lies in Flexie.js, but polyfills do take a while to render.
Description: flexie js flexbox library
Developers also need to consider browser prefixing. While IE10 is a nuisance there are A Visual Guide to CSS3 Flexbox Properties
. Introduction to the CSS Flexbox Module
. How To Get Started With CSS Flexbox
. Using Flexbox Today
. Solved by Flexbox