A Beginners Introduction to CSS Flexbox

| Web Design

An Beginners Introduction to Flexbox

The CSS Flexbox Specification is a CSS module that gives you great flexibility when creating layouts.

CSS Flexbox is an elegant and lightweight approach to layouts. It can be used without installing an extra frameworks or libraries.

Flexbox is different from the regular layouts because you can lay out items inside a flex container in all possible directions. This means that your layouts can be organize top to bottom, bottom to top, left to right or right to left.

You can create a Flexbox layout is context by declaring a container using this property:

display : flex

Flexbox uses a parent-child relationship so when you declare a flex container, the direct children of this container will automatically turn into flex items. However, it's worth noting that this doesn't apply for items: the children of flex items are not flex items.

190618 flexbox intro 001


How Does Flexbox Work?

Flexbox works on an axis grid.

Each one of the flexbox properties works either on the container or on the items, defining the way how items should be laid out inside the container.

Flex items can be laid out in all directions across their particular axis: left to right, right to left, top to bottom or bottom to top.

You can even change the order of the flex items without the need of altering the source order of your code.

Flex items can grow to fill the available space inside a container, or they can shrink to prevent overflow. Flexbox allows you to control how to handle this available space.

190618 flexbox intro 002


The Flexbox Axes

A flexbox container has two axes:

  • main axis
  • cross axis

The main axis is determined by the value of the flex-direction property. The main axis can go in these directions:

  • left to right
    flex-direction: row
  • right to left
    flex-direction: row-reverse
  • top to bottom
    flex-direction: column
  • bottom to top
    flex-direction: column-reverse

The cross axis on the other side will be always perpendicular to the main axis. Take a look at the image below. This shows how the main axis is determined according to the different values of the flex-direction property.

190618 flexbox intro 003


The Flexbox Properties

The Flexbox module has its own set of properties. Some of these properties apply to the parent container while others apply to the flex items.

190618 flexbox intro 004

190618 flexbox intro 005

This series will explain the basic concepts of Flexbox together with many practical examples.

Come along with us and turn into a Flexbox master. Here are the tutorials so far:


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.