Flexbox 101

When I first started my path in the wonderfully wacky and amazing field of the web, I was taught to use floats to achieve my desired web layout. After making seemingly thousands of layouts using this method, I come to think of myself as an expert. Though relatively simple to understand and implement, floats became somewhat of a nuisance when your layout is meant to be responsive to the device it is being used on. To make a layout responsive using floats, it is common to see additional css code, like media queries, to achieve the desired layout.

See the Pen Boring Float Layout by Adrian Eufracio (@adrianeufracio) on CodePen.

As you can see, the media queries had to be created to reach the desired layout. This is just a small example of the code bloat this layout method can cause. Imagine an actual website’s css codebase if their whole site were using floats. Now imagine a more complex layout where elements are floating within floating elements. This is where we need a more manageable solution. One where it would be easy to create complex layouts that are responsive.

The solution… Flexbox

Flexbox is a innovative way to create simple and complex layouts in a fast and flexible manner. When you set an element to display as a flex container, the child elements within that container become flex items. The browser then stretches and shrinks each flex item to fill all the available space.

See the Pen A Basic Example of Flexbox by Adrian Eufracio (@adrianeufracio) on CodePen.

Flex

Let us pull back the layers of the flex property before we go any further. You can determine the size a flex item can grow, shrink and the initial size before they take their allotted space within the flex container. To do this we apply the flex property on the flex item. The flex property is shorthand for three properties, flex-grow, flex-shrink, flex-basis.

Flex-grow defines the growth factor of a flex item relative to the other items which ultimately determines how much space an item should take in the flex container.

Setting flex-grow to 3 on a flex-item like so…

<span class="pink">.item</span> {
 flex-grow:  <span class="orange">3</span>;
}

… will make this flex item 3x bigger than the other flex items.

Flex-shrink works the same way as flex-grow, but instead it defines the shrink factor of a flex item relative to the other items.

Setting flex-grow to 3 on a flex item like so …

<span class="pink">.item</span> {
 flex-shrink:  <span class="orange">3</span>;
}

… will make this item 3x smaller than the other items.

Flex basis determines the initial width of a flex item. By giving an item a flex basis value, the flex container now knows how to handle the item in different situations.

See the Pen Flex Basis Example by Adrian Eufracio (@adrianeufracio) on CodePen.

This will create a situation where the flex items retain their width but once the flex container expands past the size of the elements combined widths of 1000px, the items will then begin to grow to fit the size of the container.

Now lets see what happens when we apply the flex-shrink property on one of the items in combination with the flex-grow and the flex-basis properties.

See the Pen Flex Propeties by Adrian Eufracio (@adrianeufracio) on CodePen.

This will work the same way as the previous example except for when the containers width is smaller than the combined elements width. item-2 will shrink twice as much as item-1. Lets write this code with the shorthand flex property.

See the Pen Flex Shorthand Example by Adrian Eufracio (@adrianeufracio) on CodePen.

Order

Have you ever wanted to switch the order of elements around in your user interface? This was possible in some circumstances using floats. With the order property, you can tell a flex item where exactly to be positioned in your flex container. This makes it quick and easy to flip around items to better suit your layout. Lets say you want the fifth element to be the first element on the main axis, the main axis is explained below in more detail.

See the Pen Flex Order by Adrian Eufracio (@adrianeufracio) on CodePen.

Flex-Direction

One of the core features of Flexbox is the ability to define the direction flex items are placed in. The direction flex items are placed relies on what is called the main axis. By default the main axis is a horizontal line that goes left to right on the flex container. Your items will be placed along this horizontal line. You can change this by assigning the flex-direction property a value.

See the Pen Flex Direction Example by Adrian Eufracio (@adrianeufracio) on CodePen.

Flex-Wrap

Another cool trick we can do is tell the flex container to wrap flex items once they don’t fit on the same line. The items will try to fit on one line unless told otherwise. This is good for flexible layouts but could produce some ugly layouts when items start to get smushed together. With flex-wrap set to wrap the last item on the main axis will be kicked over to the beginning of the main axis once the width of the item has been reached.

See the Pen Flex Wrap Example by Adrian Eufracio (@adrianeufracio) on CodePen.

/* Note: There is a shorthand property that combines flex-direction and flex-wrap */
flex-flow:  <span class="orange">flex-direction flex-wrap</span>;

Justify-Content

When you want to specify the space between flex items that do not span the entire width of their flex container, use the justify-content property.

See the Pen Justify Content by Adrian Eufracio (@adrianeufracio) on CodePen.

Align-Items

Vertical alignment has always been a tricky business when creating web layouts. Hacky solutions involved using line-height, absolute positioning and inlined elements. Flexbox provides an easy solution with the align-items property. With align-items you can specify where each item aligns vertically along the cross axis. The cross axis is perpendicular to the main axis.

See the Pen Align Items by Adrian Eufracio (@adrianeufracio) on CodePen.

Align-Self

You can also vertically align flex items individually with the align-self property. Align-self takes the same value as align-items.

align-self: <span class="orange">flex-start</span>; 
align-self: <span class="orange">flex-end</span>; 
align-self: <span class="orange">center</span>; 
align-self: <span class="orange">baseline</span>; 
align-self: <span class="orange">stretch</span>;

Align-Content

Similarly to the justify-content property, where we can define the alignment of flex items along the main axis, we can also define the alignment of items along the cross axis with the align-items property. For this to have any effect there must be more than one row of items.

See the Pen Align Content by Adrian Eufracio (@adrianeufracio) on CodePen.

Flexbox Is Awesome But…

Flexbox is a extremely useful component that you can start using today in modern browsers. Not all browsers work nicely with the flexbox module. If you are looking to support devices using IE9 and below you should not use flexbox. Also to support as many browsers as possible you should prefix all flexbox properties when available. Since there are so many different prefixes attributed to flexbox properties, it is best to run your flexbox code through a prefix generator like Pleeease. If you use npm, use Autoprefixer , to prefix your code. Hope this helps you understand flexbox and its capabilities!

Flexbox Resources