Responsive Web Design and the Flexbox

Flexbox is essentially a set of CSS properties that work together to create much more flexible and fluid layouts specifically intended for developers to make websites work on a variety of devices.

It’s a collection of CSS properties that work together to make this fluidity happen. Flexbox is both horizontally AND vertically oriented. What does this mean?

It’s designed around the idea of an axis on a webpage:

Flexboxes have a main axis and a cross axis.

This makes way for the possibility of many things:

It acts like a text align for your layout elements

Let’s say you want EVERYTHING to be center vertically. It can totally take care of that. All aligned on the top? Or aligned on the bottom? Yeah those too. What about things like moving your nav bar from one end for desktop to another place for mobile? Consider it covered.

The following is a list of css flexbox syntax that I use in projects that need consistent fluidity and responsiveness. There are several other attributes to use with flexboxes, but these are the main 6 that I use.

Here come the Flexbox Properties

  1. Display
Activates flex

By simply adding the above to your CSS, you notify your page that flexboxes are about to kick in!

2. Justify

Notifies how you want your content to be aligned horizontally and all the optional commands

Tells your content how it should sit along the main axis (horizontally). In the image above, you can see the optional commands and their fairly explicit nature. I’ll explain the less obvious ones:

  • flex-start - left-aligns content and will position elements at the beginning of the container.
  • flex-end - right-aligns content and will position elements at the end of the container.
  • space-between - aligns elements across the container with even space between all elements
  • space-around - makes sure the elements have even space before, between and after your elements
  • initial - uses the default value of the element
  • inherit - makes the element take on the positioning of it’s parent element
visual examples of justify

3. align-items

visuals of align-items

align-items does virtually the same thing as justify, except on the cross axis, aligning vertically.

4. align-content

comparing all three alignments so we can easily tell the difference

So align-content does a combination of both justify and align-items. To keep this simple, just remember that align-items is best used when wanting to align a row of content vertically, while align-content is often used to align wrapped content vertically.

5. flex-wrap

Literally says whether items should wrap or not. Think about sites like Instagram or Pinterest.

options for flex-wrap

6. flex-flow

The flex-flow​property is a shorthand property that combines the values for the flex-direction and the flex-wrap​ properties into one line of CSS, like so:

the flow of the flexbox

Finally, there are several ways to incorporate all of these facets for a smooth, easy-to-read website that is also mobile friendly! Checkout the following site to see all the options in action! Here’s another great example. Play around with your browser size and watch the keyboard change sizes!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.