CSS Tutorial
CSS - Introduction CSS - How CSS works? CSS - Syntax CSS - Colors CSS - Backgrounds CSS - Borders CSS - Margins CSS - Padding CSS - Height/Width CSS - Box Model CSS - Text CSS - Fonts CSS - Icons CSS - Cursor CSS - Outline CSS - Links CSS - Lists CSS - Tables CSS - Display CSS - Overflow CSS - Position CSS - Float CSS - Align CSS - Opacity CSS - Combinator CSS - Pseudo Classes CSS - Pseudo Elements CSS - Attribute Selector CSS - Buttons CSS - Pagination CSS - Navigation Bar CSS - Dropdowns CSS - Specificity CSS - Transition
CSS Advanced
CSS - Rounded Corners CSS - Border Image CSS - Background CSS - Gradients CSS - Shadow CSS - Text Effects CSS - 2D Transform CSS - 3D Transform CSS - Animation CSS - Object-fit CSS - Box Sizing CSS - Filters CSS - Style Images CSS - Variables CSS - Media Queries CSS - Flexbox Layout CSS - Grid Layout
CSS Responsive
RWD - Introduction RWD - Grid View RWD - Media Queries RWD - Images
CSS References
CSS - Reference CSS - Selectors CSS - Functions CSS - Units CSS - Animatable CSS - Entities

CSS Flexbox Layout

CSS Flexible Box Layout is a one-dimensional layout method for laying out items (direct children elements) in rows or columns.

Flex item 1
Flex item 2
Flex item 3
Flex item 4

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.


CSS Flexbox Layout

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

To start using the Flexbox model, you need to define two things:

  • Flex Container (Parent)
  • Flex Items (Direct Child)

Creating Flex Container (Parent)

Use display:flex; to create a flexbox container and transform direct children elements into flex items.

Flex item 1
Flex item 2
Flex item 3

The element above represents a flex container with three flex items.

Run code

The flex container properties are:


The flex-direction Property

The flex-direction property defines how flex items are ordered within a flex container defining the main axis and the direction (normal or reversed).

This property can have following values:

  • row
  • row-reverse
  • column
  • column-reverse

Click on the buttons below to see the difference between the four values:

Flex item 1
Flex item 2
Flex item 3
Run code

The justify-content Property

The justify-content property defines how the browser distributes space between and around flex items (horizontally).

This property can have following values:

  • flex-start
  • flex-end
  • center
  • space-between
  • space-around

Click on the buttons below to see the difference between the five values:

Flex item 1
Flex item 2
Flex item 3
Run code

The align-items Property

The align-items property defines how the browser distributes space between and around flex items (vertically).

This property can have following values:

  • flex-start
  • flex-end
  • center
  • baseline
  • stretch

Click on the buttons below to see the difference between the five values:

Flex item 1
Flex item 2
Flex item 3
Run code

Flex Items (Direct Child)

The direct child elements of a flex container are called flex items:

Flex item 1
Flex item 2
Flex item 3

The element above represents three flex items inside a flex container.

The flex item properties are:


The align-self Property

The align-self property specifies the alignment for the selected flex item (vertically).

This property can have following values:

  • flex-start
  • flex-end
  • center
  • baseline
  • stretch

Click on the buttons below to see the difference between the five values:

Flex item
Aligned Flex item
Flex item
Run code

The flex-grow Property

The flex-grow property specifies how the flex item will grow relative to the other items inside the flex container.

Flex item 1
Flex item 2
Flex item 3
Run code

The flex-shrink Property

The flex-shrink property specifies how the flex item will shrink relative to the other items inside the flex container.

Flexitem1
Flex item 2
Flex item 3
Run code

The order Property

The order property specifies the order of a flex item relative to the rest of the flex items inside the flex container.

Run code

Flexbox Layout - Center Aligned Element

Use justify-content and align-items properties to center align elements horizontally and vertically:

Run code

Flexbox Layout - Equal Width Columns

Using flexbox we can easily create equal width columns:

Column 1
Column 2
Column 1
Column 2
Column 3
Column 1
Column 2
Column 3
Column 4
Run code

Flexbox Layout - Responsive Equal Width Columns

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

The following example shows how to get responsive equal-width columns.

On mobile phones or screens that are less than 576px wide, the columns will automatically stack.

Run code

CSS Flexbox properties

Property Description
display Specifies the type of box used for an HTML element
flex-direction Specifies the direction of the flexible items inside a flex container
justify-content Horizontally aligns the flex items when the items do not use all available space on the main-axis
align-items Vertically aligns the flex items when the items do not use all available space on the cross-axis
flex-wrap Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line
align-content Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines
flex-flow A shorthand property for flex-direction and flex-wrap
order Specifies the order of a flexible item relative to the rest of the flex items inside the same container
align-self Used on flex items. Overrides the container's align-items property
flex A shorthand property for the flex-grow, flex-shrink, and the flex-basis properties
flex-grow Specifies how the flex item will grow relative to the other items inside the flex container
flex-shrink Specifies how the flex item will shrink relative to the other items inside the flex container
flex-basis Specifies the initial length of a flex item