A Comprehensive Guide To CSS FlexBox

Introduction

Before the FlexBox layout module was introduced, web developers created layouts using float and positioning properties with corresponding values. This involves either changing an element’s position to the right, left, or center using the float property, or changing the static default position of an element and moving elements to a desired position using the top, left bottom, and right properties.

One of the reasons why the flexible box or flexbox layout is such an effective styling method is due to its ability to provide selected HTML elements (flex-containers) with control over their items (flex items), in terms of width, height, and order.

Consequently, a flex container could shrink its size to prevent overflow of its items or extend to fill available spaces.

This article provides you with all you need to know to move from worrying about how to center a div to making more impressive and responsive layouts with just flexbox in the most succinct way possible.

Prerequisite

This article is open to everyone with a basic knowledge of HTML, CSS and an open mind.

CSS Box Model

The box model is simply a phenomenon that explains that the content of an HTML element is wrapped inside a box, which consists of paddings, margins, and borders. The width and height of the content are also reliant on the box model.

See https://www.w3schools.com/css/css_boxmodel.asp for more!

What is Flexbox?

Flexbox is a layout style that allows the repositioning or resizing of a container in a one-dimension. In other words, one dimension in this context means, you can only reposition or resize elements either by column or row but not simultaneously.

An alternative to this is the grid layout system.

Flexbox Axis

The axis in the flexbox is used to explain how flex items are stacked.

There are two types :

Main Axis: This, by default runs from left to right in a flexbox module

Cross Axis: This, by default runs perpendicularly to the main axis. E.g. From top to bottom.

Flex Container and Flex Items.

A flex container is simply a selected HTML element that acts as a parent to another element or set of elements called flex-items.

An element is declared flexible simply by stating its display property, flex.

Syntax

.flex-container{
display: flex;
}

A flex item is a direct child to a flex container.

Flexbox Layout Properties

Upon converting a standard HTML element into a flexible box model, Flexbox offers two distinct groups of properties for positioning the flexible container and its immediate children:

1. Flex Container Properties

2. Flexible Item Properties

Flexible Container Properties

These are attributes that are used to create different layout styles for superior elements housing the flexible items, and they are

1. Flex-direction

2. Flex-wrap

3. Flex-flow

4. Justify-content

5. Align-content

6. Align-Items

Flex-direction

This refers to the direction in which the flex-container stacks its items.

By default, this is usually across its main axis.

Values include column, row, column-reverse, and row-reverse.

When flex-direction is set to column-reverse or row-reverse, this simply tells the browser to reverse the layout direction.

Column The flex-direction: column property-value informs the browser to stack items vertically

Syntax

.flex-container{
Flex-direction: column;  /*stacks items vertically.*/
}

Flex-wrap

The flex-wrap property specifies if items should overflow to the next line or not when necessary. Its values are wrap, nowrap, and wrap-reverse.

Flex-wrap: wrap;

This property: value pair tells the browser to overflow items to the next line when necessary and also when the browser window is shrunk This is mostly used to make a web page responsive.

Example

.flex-container{
display: flex;
flex-wrap:wrap;
background: grey;
}

.flex-container div{
width: 120px;
margin: 12px;
background-color: #ff3f88;
height: 75px;
text-align: center;
color: #fff;
line-height: 70px;
font-size: 35px;
border-radius: 20px;
}
/*
The flex-wrap: wrap property-value ensures that flex elements fit
the current window size. When a window is resized, items break into the next-line
to fit into the new window size.
*/

Flex-wrap: no-wrap

The flex-wrap:no-wrap property-value pair ensures that all elements remain in a single line even when the browser window is shrunk – instead, the items themselves are shrunk in size to retain visibility.

Example

.flex-container{
display: flex;
flex-wrap: no-wrap;
background: grey;
}

.flex-container div{
width: 120px;
margin: 12px;
background-color: #ff3f88;
height: 75px;
text-align: center;
color: #fff;
line-height: 70px;
font-size: 35px;
border-radius: 20px;
}

Flex-wrap: wrap-reverse

This property informs the browser to move items to the next line in a reverse manner. i.e. from bottom to top.

Example

.flex-container{
display: flex;
flex-wrap: wrap-reverse;
background: grey;
}

.flex-container div{
width: 120px;
margin: 12px;
background-color: #ff3f88;
height: 75px;
text-align: center;
color: #fff;
line-height: 70px;
font-size: 35px;
border-radius: 20px;
}

Flex-flow

This is a shorthand property for both the flex-direction and flew-wrap properties.

So, instead of writing the flex-direction and flex-wrap properties differently for the same container, the flex-flow property is used to write just once.

Instead of writing :

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

Flex-flow makes it even shorter:

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

Justify-Content

The justify-content property positions flex items along the browser's main axis. Available values include Flex-start, Center, flex-end, space-between, space-evenly, space-around.

Justify-content: flex-start;

This is the default value for the justify-content property.

This tells the browser to position the container at the beginning of the line along the main axis.

Justify-content: flex-end

Unlike the flex-start value, flex-end tells the browser to move the container to the end of the line along its main axis. This does not necessarily overflow the items.

Justify-content: center;

This tells the browser to center the flex-container’s items.

Justify-content: space-between:

This space-between value aligns items by first occupying the main axis and creating equal spaces between each flex item.

Justify-content: space-evenly

The space-evenly value applies space around the two ends of the container before applying even spaces between the items involved.

Space-around aligns items such that the space at both ends of the containers is half the space between each item.

Align-Items

This property positions flex items along the flexbox’s cross-axis. Values include stretch, baseline, flex-start, flex-end, and center.

Align-Items: flex-start:

Flexible items are aligned at the very top of the container's cross-axis.

Align-Items: flex-end

Flex items are aligned at the bottom of the container’s cross-axis.

Align-items: center

Flex items are aligned at the center of the container’s cross-axis.

Align-Items: Stretch

This property extends the length of items in a flexible container, to fill the flexbox’s default cross-axis.

Align-Items: Baseline

Flexbox items are aligned with the baseline of the container’s cross-axis.

The baseline refers to the position where most of the letters sit.

Align-Content

Align-content indicates how flexible items are arranged along the container's cross-axis lines.

Values include flex-start, flex-end, stretch, center, space-between, space-around, and space-evenly.

The align-content property does not apply to containers with a single line. For example, flex-containers with the property: value, Flex-wrap: no-wrap.

Align-content: flex-start

This property: value aligns flexible items, starting from the top edge of the container’s cross-axis.

Align-content: flex-end

This property aligns items at the bottom edge of the cross-axis lines.

Align-content: Stretch

The stretch value stretches items to fill the container’s cross-axis lines.

Align-content: Center

This property aligns the container’s lines at the center of its cross-axis.

Align-content: space-between

Each line in the container’s cross-axis is given an equal amount of space between them, with the first line at the flex-start position, and the last line at the flex-end position of the container.

Align-content: space-around

This property awards an equal amount of space between lines in a container’s cross-axis, except the line before the first line and that after the last line takes about half the height of the rest.

Align-content: space-evenly

Space-evenly provides exactly an equal amount of space between lines in a container’s cross-axis including the one before the first line, and that after the last line.

Flexible Item Properties

These are properties attributed to the direct children of a flexible container.

They include:

1. Order

2. Flex-grow

3. Flex-shrink

4. Flex-basics

5. Flex

6. Align-self

Order

Flexbox items are displayed on the browser exactly how they are ordered on their corresponding HTML document. However, the order property is used to reposition flex items without altering the source document itself.

Example

 <ul style="display:flex; flex-direction: column">
      <li style="order:6">1</li>
      <li style="order:4">2</li>
      <li style="order:5">3</li>
       <li style="order:2">4</li>
       <li style="order:1">5</li>
       <li style="order:3">6</li>
   </ul>

The order property: value system can be quite confusing for most beginners, so oftentimes, it is usually advisable to alter the source document directly.

Flex-grow

This property specifies how much a selected flexible item should grow relative to other items in the same container. This tells the selected item to take up the excess available space.

The default value is 0.

Flex-shrink

The flex-shrink property opposes the flex-grow property. This tells a flex item to reasonably grow smaller, relative to the size of other items in the container, or how much flexible items should reduce in size when the container size specified is insufficient.

Flex-shrink default value is 0.

Flex-basics

Flex-basics property sets an initial length for an item. The default value for flex-basics is auto.

Flex

The flex property is a shorthand for flex-grow, flex-shrink, and flex-basics in this particular order. So, instead of writing the property and their values individually, the flex property is used to write them once.

So, instead of writing:

.flex-item{
  flex-grow: 3;
  flex-shrink: 0.8;
  flex-basis: 100px;
}

We write:

.flex-item{
    flex: 3 0.8 100px;
}

Align-self

This specifies how flexible items are positioned along the flexbox’s cross-axis. This property overrides the flex-container: align-item properties. Its property values include stretch, flex-start, flex-end, center, and baseline.

Align-self: Stretch

The stretch value for the align-self property stretches a flexible item to fill its container cross-axis (by default, the horizontal part of a container.

Align-self:flex-start

This aligns a flexible item with the top edge of the container’s cross-axis.

Align-self:flex-end

As opposed to flex-start, this aligns an item with the bottom edge of the container’s cross-axis.

Align-self: center

This aligns a selected item with the center of the container cross-axis.

Align-self: baseline

The baseline value for the align-self property basically aligns the selected item with the baseline of the flexbox cross-axis.

Centering a DIV with FlexBox

As a beginner just starting out with web development, one of the many hurdles one faces in this journey is centering a div. Typically, this is also the case for even experienced developers.

To center a div or a flex-item as the case may be, the first thing is to set the flex-container display value to flex, and then the Justify-content and Align-items values to center respectively.

Overview

In this article, we moderately discussed basic concepts and flexbox principles you need to design responsive web applications in the most beginner-friendly way possible.