Flexing with CSS Flexbox

Flexbox also known as flexible box is a type of layout model in CSS that makes it super easy to design responsive layouts.

The whole idea behind the Flexbox layout model is to allow elements to be laid out in any direction, flex their size to either fill up unused space or shrink to avoid overflowing their parent element, either horizontally or vertically.

To truly be able to flex with Flexbox, we have to understand how it works.

Let’s break it down into its properties into two namely;

Flex Container
Flex Items
Flex Container
This is the parent html element that houses the items you want to lay out.

To use any of the flex properties, this container has to be created.

It’s what creates the context that allows every other flex properties to work.

align-items
This allows you to align the items in the flex container vertically, regardless of the height of the item with respect to their flex container or each other.

The values it accepts are: flex-start | flex-end | center | baseline | stretch

justify-content
This is the opposite of align-items, it aligns its item horizontally regardless of the width of the item with respect to their container or each other.

Values: flex-start | flex-end | center | space-between | space-around | space-evenly

flex-wrap
The flex-wrap property specifies whether the flex items should break to the next line or not.

By default all flex items will try to fit in a single line, but this property tells the browser to break them into another line when they become way too many to fit in a single line.

This line we speak of is also known as a F lex line.

Values: nowrap | wrap | wrap-reverse

align-content
This property modifies the behavior of the flex-wrap property.

It essentially behaves like the align-items property, only that it aligns the flex lines instead of the flex items.

To make this property work, flex-wrap: wrap has to be set on the flex container and the flex lines have to be more than one.

Values: flex-start | flex-end | center | space-between | space-around | stretch

flex-direction
This defines which direction the browser should stack the Flex items i.e vertically or horizontally.

Values: row | row-reverse | column | column-reverse

flex-flow
This is a shorthand for flex-direction and flex-wrap so instead of writing the below;

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

you can just do this;

.container {
   display: flex;
   flex-flow: column wrap;
}