CSS Flexbox 101: Vertically Align your items Now

I apologize for the clickbait title. I believe many of us still believe CSS is that messy thing everyone wants to avoid. Its 2017 and that is no the case anymore.

So in this post we will learn about CSS3 flexbox model. YAY!! 🙌

Spoiler Alert: It changes everything.

Bootstrap 4 beta was released earlier this year and moved to flexbox & Sass from outdated block model & Less. There are still some bugs in Bootstrap 4 but people are getting excited about the new framework on flexbox. So let us get some basics down on flexbox concepts.

The CSS3 Flexible Box, or flexbox, is a layout mode intended to accommodate different screen sizes and different display devices. For many applications, the flexible box model is easier than the block model since it does not use floats, nor do the flex container’s margins collapse with the margins of its contents.

1. The Parent and the Child

To make any element follow flexbox properties, there should be two components. The container (parent) and the items (child) which are inside the container.

To initialize flexbox just put display:flex in the parent element i.e in .container

.container {
display:flex;
}

There are 2 properties that get applied by default on initializing display: flex;

  • flex-direction
  • flex-wrap

So the .containerhas the follow properties assigned

.container{
display:flex;
flex-direction: row;
flex-wrap: no-wrap
}

Let change flex-direction to column and see what we get

.container{
display: flex;
flex-direction: column;
flex-wrap: no-wrap;
}

Now that we have introduced flex-direction, there is one more concept we need to know which is crucial in understanding how flexbox works. In flexbox we have 2 axis main-axis& cross-axis

If the flex-direction is row then the main-axisruns from left-to-right and the cross-axisruns from top-to-bottom.

If the flex-direction is column then the main axis now runs from top-to-bottom and the cross-axis runs from left-to-right.

2. Properties of Parent

In flexbox, some styles only applies to parent element & some styles only to the child element.

  • Justify-content

justify-content aligns all the children items along the main-axis.

Lets center all the items horizontally

  • align-items

align-items aligns all the children items along the cross-axis.

Lets center the items vertically. (See I was not kidding in my Title) 😜

I recommend to play around different properties of justify-content and align-items along with flex-direction.You can find the detailed flexbox properties here.

3. Properties of Children

  • Order

We can now reorder any child item we like. This comes super handy when we want some div to show up in mobile website.

By default the order of all the items is 0. If you assign any item with order >0 or <0, the item will move from its place.

Lets see an example

  • Flex

This is one of the most frequent property we will use while using flexbox. Flex is a shorthand for three properties flex-grow; flex-shrink; flex-basis.

The flex-growCSS property specifies the flex grow factor of a flex item. It specifies what amount of space inside the flex container the item should take up.

The flex-shrinkCSS property specifies the flex shrink factor of a flex item. Flex items will shrink to fill the container according to the flex-shrink number, when the default width of flex items is wider than the flex container.

The flex-basisCSS property specifies the flex basis which is the initial main size of a flex item. This property determines the size of the content-box unless specified otherwise using box-sizing

To know more you can watch this awesome tutorial by Wes Bos

Lets take an common dashboard layout to see this properties in action.

4. Exercise

Here is a fun exercise to practice what you have learned so far. Last stage is pretty tricky, do post your screenshot after you complete the challenge 📷.

http://flexboxfroggy.com/ 🐸

5. Resources

Here are some excellent resources to deep dive into CSS flexbox.

  1. What the flexbox by Wes Bos

2. Flexbox is easy as Pie — Designing CSS Layouts by Smashing Magazine

3. The Ultimate flexbox cheatsheet.


Tridip Thrizu is an Interaction Designer from Bangalore. Founder of SimpleGrid

If you liked this article please leave 👏 as an appreciation.