Learning CSS Flex

Before the Flexbox Layout module, there were four layout modes:

Block, for sections in a webpage
Inline, for text
Table, for two-dimensional table data
Positioned, for explicit position of an element

The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.

Introduction

The Flexbox Layout is a new layout module in CSS3 made to improve the items align, directions and allows you to easily format HTML. Flexbox makes it simple to align and order in the elements vertically and horizontally.

The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes).

Advantages of Flexbox

We can align elements or content is centered both horizontally and vertically by using flexbox.
Doesn’t required Float properties and clear properties in flexbox
We can flex sizes to respond to the available space
We can element display order reversed or rearranged at the style layer
Flexbox layout makes it easier to design flexible layout structure without using float properties.
One of the most important things, we can manage the equal height of the element in the single row without using any jquery. [Just put display : flex on parent container]

Flexbox Elements

The flex box container could be implemented by just using display:flex over the flex-container, like below example.

HTML Code (This piece of HTML snippet will be used as an example in the entire guide):

<div class="flex-container">
   <div class="item"> 1 </div>
   <div class="item"> 2 </div>
   <div class="item"> 3 </div>
   <div class="item"> 4 </div>
   <div class="item"> 5 </div>
</div>

CSS Code:

.flex-container{ 
   display:flex
}

The output will look like:

Here if you will notice in the HTML code there are 2 types of element, one is the container div with the class flex-container, inside the container div exist the children those are considered flex items.

Hence, we have divided the properties into 2 parts, one is for the flex-container and other is for flex-items.

The flex-container properties:

The flex container properties are:

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

The flex-direction Property

The flex-direction property defines in which direction the container wants to stack the flex items. It has the follow values available:

Default value: row

The row value stacks the flex items horizontally (from left to right)
The column value stacks the flex items vertically (from top to bottom)
The column-reverse value stacks the flex items vertically (but from bottom to top)
The row-reverse value stacks the flex items horizontally (but from right to left)

Let’s see how it can be used:

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

Output:

flex-wrap

The flex-wrap property controls whether the flex items should wrap or not. It has the follow values available:

Default value: nowrap

The nowrap value specifies that the flex items will not wrap
The wrap-reverse value specifies that the flexible items will wrap if necessary, in reverse order
The wrap value specifies that the flex items will wrap if necessary

Let’s see how it can be used:

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

Output:

flex-flow

The flex-flow is a shorthand of the flex-direction and flex-wrap properties.

Let’s see how it can be used:

.flex-container { 
  display: flex; 
  flex-flow: row nowrap; 
}

Output:

justify-content

The justify-content property is used to align flex items along the main x-axis of the current row of the flex container. It has the follow values available:

Default value: flex-start

The center value aligns the flex items at the center of the container
The flex-start value aligns the flex items at the beginning of the container (this is default):
The flex-end value aligns the flex items at the end of the container:
The space-around value displays the flex items with space before, between, and after the lines:
The space-between value displays the flex items with space between the lines:
wrap-reverse: The wrap-reverse value specifies that the flexible items will wrap if necessary, in reverse order
wrap: The wrap value specifies that the flex items will wrap if necessary

Let’s have a look at couple of examples and their output:

.flex-container {
  display: flex;
  justify-content: center;
}

Output:

.flex-container {
  display: flex;
  justify-content: space-between;
}

Output:

align-items

The align-items property is used to align the flex items in y-axis. It has the following values available:

Default value: stretch

The center value aligns the flex items in the middle of the container
The flex-start value aligns the flex items at the top of the container
The flex-end value aligns the flex items at the bottom of the container
The stretch value stretches the flex items to fill the container (this is default)
The baseline value aligns the flex items such as their baselines aligns

Let’s see how it can be used:

Note: In this example we use a 300 pixels as the height of the container, to better demonstrate the align-items property.

.flex-container {
  display: flex;
  height: 300px;
  align-items: center;
}

Output:

align-content

The align-content property is used to align the flex lines. It has the following values available:

Default value: stretch

The stretch value stretches the flex lines to take up the remaining space
The space-between value displays the flex lines with equal space between them
The space-around value displays the flex lines with space before, between, and after them
The center value displays display the flex lines in the middle of the container
The flex-start value displays the flex lines at the start of the container
The flex-end value displays the flex lines at the end of the container

Let’s see how it can be used:

Note: In this example we will use a 300 pixels as the height of the container, to better demonstrate the align-content property.

.flex-container {
  display: flex;
  height: 300px;
  align-content: center;
}

Output:

The flex-item properties:

The flex item properties are:

order
flex-grow
flex-shrink
flex-basis
flex
align-self

order

The order property specifies the order of the child items.

Default value: 0

Let’s see how it can be used:

The order property can change the order of the flex items:

<div class="flex-container">
  <div style="order: 2">1</div>
  <div style="order: 3">2</div>
  <div style="order: 4">3</div>
  <div style="order: 5">4</div> 
  <div style="order: 1">5</div>
</div>

Use of inline styling is only meant for the purpose of learning. It is always recommended to use proper classes to style each element.

Output:

flex-grow

The flex-grow property defines ability for a flex item to grow. It has the following values available:

Default value: 0

Let’s see how it can be used:

Make the third flex item grow 10 times faster than the other flex items:

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 10">3</div>
  <div style="flex-grow: 1">4</div>
  <div style="flex-grow: 1">5</div>
</div>

Output:

flex-shrink

The flex-shrink property defines the ability for a flex item to shrink if necessary. It has the following values available:

Default value: 1

Let’s see how it can be used:

Do not let the third flex item shrink as much as the other flex items:

<div class="flex-container">
  <div style="flex-shrink: 1">1</div>
  <div style="flex-shrink: 1">2</div>
  <div style="flex-shrink: 0">3</div>
  <div style="flex-shrink: 1">4</div>
  <div style="flex-shrink: 1">5</div>
</div>

Output:

flex-basis

The flex-basis defines the default size of an element before the remaining space is distributed. This property takes the same values as the width and height properties, and specifies the initial main size of the flex item, before free space is distributed according to the flex factors.

Default value: auto

Let’s see how it can be used:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis: 200px">3</div>
  <div>4</div>
  <div>5</div>
</div>

flex

The flex property is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties.

Default value: 0 1 auto

Let’s see how it can be used:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 0 0 200px">3</div>
  <div>4</div>
</div>

align-self

The align-self property specifies the alignment for the selected child item in the flex-container. It also overrides the default alignment set by the container’s align-items property.

Let’s see how it can be used:

In this example we have set the height of the container to be 200 pixels, to better demonstrate the align-self property.

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: center">3</div>
  <div>4</div>
  <div>5</div>
</div>

Output:

Want more?

https://codepen.io/enxaneta/full/adLPwv
https://tobiasahlin.com/blog/masonry-with-css/
https://flexboxfroggy.com/