Getting Started with CSS Flexbox

A beginner’s take on crafting responsive design elements with flexible boxes

CSS Flexbox is a concept that has been covered with a fair amount of vigor in the past. While the idea first came about in 2009, it is more prominent now and is a widely known option for using in responsive designs.

For someone new to the concept, like me, there are so many guides and tutorials on the subject. To help ease fellow front-end development amateurs/enthusiasts into the subject, this post is a basic introduction to the concept and also a collection of helpful resources on how and when to use flexbox in your web design.

What Is CSS Flexbox?

According to W3C documentation:

In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.

What this essentially means is that elements deemed to be ‘flexible’ will resize and position themselves optimally when the display area is stretched or shrunk. This automatic resizing and relocation is a great way to develop modern responsive design. While flexbox is not meant to layout entire page designs, it is very useful when positioning specific elements — whether individually or in groups.

Basic components and terminologies

The first thing to know is that there are two basic components in flexbox. One is the flex container and the other is flex-item. Flex-container is the element on a page that contains flex-items. This could be a div or a header section.

Flex-items are the direct child elements of a flex-container. For example, the links in the navigational section inside a header div would be flex-items in that flex-container.

The image is a simple demonstration of what is a flex-container and what constitutes a flex-item.

To make an element a flex-container, set its display property to flex.

display: flex

If we don’t want the container element to behave like a block element, we can set display to inline-flex value.

display: inline-flex

Within the image above are two more essential terms for flexbox — main axis and cross axis. Every flexbox has two axes. These axes determine the direction along which elements will resize when display size changes. By default, the horizontal axis is the main axis (along the row) and the vertical axis is taken as the cross-axis (along the column).

Flex-direction

This property that can be used to customize the axis orientation inside a flex-container. There are four values that it can take:

row: The default value that positions elements from left to right inside the parent element starting from the top left corner. column: Elements are positioned from top to bottom inside the parent element starting from the top left corner. row-reverse: Elements are positioned from right to left inside the parent element starting from the top right corner. column-reverse: Elements are positioned from the bottom to top inside the parent element starting from bottom left corner.

Justify-content & align-items

One of the most useful feature when using flexbox is the ability to organize flex-items from left to right or top to bottom inside a flex-container.

To do this along the horizontal axis, use the justify-content property and for doing this along the vertical axis, use the align-items property.

Justify-content can be used to position elements from first element to last without any space at the beginning (flex-start), to position them in order from first to last without any space at the end (flex-end), to position them in the center without any space between them (center), to spread them out evenly without any space at each end (space-between), or to spread them out evenly but with space before and after the elements (space-around).

Similarly, align-items can be used to position elements along the vertical axis to position elements from top to bottom. Flex-start, flex-end and center behave in the same way along the vertical axis. The values that are different are: