CSS Flexbox

CSS Flexbox

Part 1: Introduction

Is Flexbox complicated? Many would say it is but, it is actually really easy to implement. This is part 1 of a 3-part series on CSS flexbox. By the end of this article you should know;

  • Flexbox definition

  • A brief timeline on Flexbox

  • When to use Flexbox

  • All about the Flexbox box model

CSS is beautiful but can get frustrating at times, especially with positioning elements. When Flexbox was introduced it became the holy grail for elements layout and also a bonus, responsiveness.

Let's dive into it then.

What is Flexbox?

Flexible box module, generally referred to as Flexbox, is a CSS3 layout model. A CSS layout model is a method of positioning elements in a webpage relative to:

  • Their default position in normal layout flow

  • Their parent container

  • Other elements around them

  • Device viewport

Flexbox is used to layout contents in one dimension i.e. either row or column.

A brief Timeline of CSS Flexbox

Flexbox underwent a series of changes, starting with 9 properties and now totaling 12 properties.

Read more

Working Draft (23 July 2009 - 12 June 2012)

July 23, 2009

The first working draft published on the World wide web consortium (W3C) was on July 23, 2009.

In its early stages, Flexbox had display: box; . With a total of eight properties, each having the prefix box. The term "box elements" referred to the container while "children of box elements" referred to its content.

A table showcasing 3 Columns for flexbox properties, value and initial. 2009

March 22, 2011

There were improvements including,

  • display: flexbox | inline-flexbox;
  • four properties, each with a prefix flex
  • Introduction to properties, flex-direction and flex-order.
  • flex-order having an initial value of 1
  • Container now renamed flex box and its content, flexbox items.

November 29, 2011

There were modifications and further improvements including,

  • Introduction of the Flexbox Box Model
  • Replacement of flex-direction with flex-flow, which became a shorthand for flex-direction and wrapping
  • flex-order property initial value becomes 0
  • Properties now totaling 5

March 22, 2012

Contunued improvement and further modifications including,

  • Introduction of an illustration for the Flexbox Box Model
  • Reintroduction of flex-direction with modifications to it
  • When to use Flexbox?

    Flexbox is used to achieve responsiveness on web or app development without difficulty. Practical examples of Flexbox usage include:

    • Centering items in a container

    • Aligning contents

    • Navbar creation

    • Space distribution among contents within a container etc.

    Flexbox box Model

    Flexbox box model illustration

    From the illustration above, there are two flex items and a flex container. There are also labels for other important aspects of Flexbox. These are the basic and important terms we'll use in the course of this tutorial.

    Flex container:

    This is an element having a display property of flex or inline-flex display: flex | inline-flex. From the illustration, it is the white backdrop holding the flex items.

    Flex item:

    These are direct children of the flex container. From the illustration, they are aligned from left to right. Note that flex items of a container can also become flex containers to elements within them.

    Main axis:

    This is the principal axis along which items are positioned. It is dependent on the flex-direction property ( it would become clearer in the next part of this series). Note that the main axis should not be confused with being horizontal.

    Main start and end:

    From the illustration, observe how the items are laid out from one point to the other on the main axis. The beginning is known as the main start while the other end is known as the main end.

    Note that apart from direction dependency, writing mode should also be taken into account. For example, English is written from left to right, while Hebrew is written from right to left when flex-direction: row;

    Four boxes labeled 1,2,3 and 4 respectively, aligned of the left side of a white backdrop

    Four boxes labels 4,3,2 and 1( in Hebrew language) respectively, aligned to the right side of a white backdrop

    Therefore, the main start to main end runs from left to right for English, while the reverse is the case for Hebrew.

    Main size:

    This represents the size of the flex container or items along the main axis. It could either be width or height relative to the direction.

    Cross axis:

    This axis is always perpendicular to the main axis. It is also dependent on flex-direction.

    Cross start and end:

    From the cross axis, cross start is the beginning of the container or item, while cross end is the end. There aren't many languages that are written from bottom to top but Hanun贸'o ( Indigenous to Filipinos) is one of a few. Therefore the cross start to cross end will be from bottom to top if flex-direction: row;

    Cross size:

    Like main size, it is the size of the element (flex container or items) along the cross axis. It could also be width or height depending on direction.

    Wrapping up

    If you made it to this point I bet you let out a "phew" 馃榿, it might seem hard to remember, but it'll become a lot clear when we utilize it in the next part. We've covered:

    • Flexbox as a CSS3 layout model

    • A brief history of Flexbox

    • Flexbox basic Terminologies

    Flex container

    Flex items

    Main axis, main start and end, and main size

    Cross axis, cross start and end, and cross size

    Now that you know the basics, next, we'll get into the fun part馃槒, Flexbox properties, and how to use them.

    If you found this helpful, like and comment 馃檪, also if you have any additions feel free to put them in the comments.