DEV Community

Cover image for A beginners guide to CSS flexbox - part one
Chrissie
Chrissie

Posted on

A beginners guide to CSS flexbox - part one

#beginners #codenewbie #css #webdev

CSS flexible layout module or flexbox for short is a web layout model that helps in designing a flexible layout. It allows items inside a container to be aligned automatically according to the screen size.

In this article, I'll be giving you the main properties of flexbox and showing you how they work. The first part will be about properties that affect the flex container and the second part about properties that affect the flex items.

When using flexbox, items will be displayed following two axes, the main axis, and the cross axis.

The main axis as the name implies is the main axis where items will be displayed. By default, the main axis is horizontal.

The cross axis is perpendicular to the main axis and its direction depends on the direction of the main axis. By default, the cross axis is vertical.

Diagram of flexbox container with flex items and lines showing the main and cross axis

To start using flexbox you have to first declare a container and inside it, we'll add a few divs that'll we'll use as an example.

<div class="container">
   <div class="item">1</div>
   <div class="item">2</div>
   <div class="item">3</div>
   <div class="item">4</div>
</div>
Enter fullscreen mode Exit fullscreen mode

To make the container flexible, you have to set the container display to flex. We'll also add some styling to the items inside the container.

.container{
display: flex;
}

.item {
  background-color: #f5f;
  border: 2px solid #0000;
  padding: 2rem;
  font-size: 2rem;
}
Enter fullscreen mode Exit fullscreen mode

container display set to flex

The main properties of flexbox are:

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

Flex-direction

The flex-direction property indicates the direction in which the items inside the flexbox container will be laid out in.

It has four value:

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

1.Row

The row value is the default value and it will align the items horizontally from left to right.

    .container{
    display: flex;
     flex-direction: row;
    }
Enter fullscreen mode Exit fullscreen mode

flex direction set to row

2.Row-reverse

The row-reverse value will align the items horizontally from right to left.

 .container{
    display: flex;
    flex-direction: row-reverse;
 }
Enter fullscreen mode Exit fullscreen mode

Flex direction is set to row reverse

3.Column

The column value will align the items vertically from top to bottom.

  .container{
    display: flex;
    flex-direction: column;
  }
Enter fullscreen mode Exit fullscreen mode

Flex direction is set to column reverse

4.Column-reverse

The column-reverse value will align items vertically from bottom to top.

  .container{
    display: flex;
    flex-direction: column-reverse;
  }
Enter fullscreen mode Exit fullscreen mode

Flex direction is set to column reverse

Flex-wrap

In case you have a lot of items and they all appear on the same line overflowing of the container, you'll use the flex-wrap property to specify whether a container should wrap or not.

1.Wrap

The wrap value specifies that the items should be broken down into multiple rows so as to prevent any overflow. Any element that would cause an overflow will then be fitted into a new line.

  .container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
Enter fullscreen mode Exit fullscreen mode

Flex wrap is set to wrap

2.Nowrap

This is the default value and if used will leave the items as is in a single line.

 .container{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
 }
Enter fullscreen mode Exit fullscreen mode

Flex wrap is set to no wrap

Flex-flow

The flex-flow property is a shorthand property for flex-direction and flex-wrap.

.container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
Enter fullscreen mode Exit fullscreen mode

Instead of writing the above, the code will be the following

.container{
display: flex;
flex-flow: row wrap;
}
Enter fullscreen mode Exit fullscreen mode

Justify-content

This property is used to align the items of the flex container along the direction that was previously specified using flex-direction.

1.Flex-start

This is the default value and will align the items at the beginning of the container.

  .container{
    display: flex;
    justify-content: flex-start;
  }
Enter fullscreen mode Exit fullscreen mode

Justify content is set to flex start

2.Flex-end

This value will align the items at the end of the container.

  .container{
    display: flex;
    justify-content: flex-end;
  }
Enter fullscreen mode Exit fullscreen mode

Justify content is set to flex end

3.Center

This value will align the items at the center of the container.

 .container{
    display: flex;
    justify-content: center;
  }
Enter fullscreen mode Exit fullscreen mode

Justify content is set to center

4.Space-around

This value will distribute the items evenly in the line with spaces around the items.

 .container{
    display: flex;
    justify-content: space-around;
 }
Enter fullscreen mode Exit fullscreen mode

Justify content is set to space around

5.Space-evenly

This value will add equal spacing between two items.

 .container{
    display: flex;
    justify-content: space-evenly;
 }
Enter fullscreen mode Exit fullscreen mode

Justif content is set to space evenly

6.Space-between

This value will display the items evenly along the line. The first element will be at the start and the last element will be at the end of the line.

 .container{
    display: flex;
    justify-content: space-between;
 }
Enter fullscreen mode Exit fullscreen mode

Jusitfy content is set to space between

Align-items

This property is used to align the flex items along the cross axis which is perpendicular to the main axis.

To better demonstrate this property, I set the container height to 200px and background color to black.

1.Stretch

This is the default value and will stretch the items to fill the container.

 .container{
    display: flex;
    align-items: stretch;
 }
Enter fullscreen mode Exit fullscreen mode

Align items is set to stretch

2.Flex-start

This value will align the items at the top of the container.

 .container{
    display: flex;
    align-items: flex-start;
 }
Enter fullscreen mode Exit fullscreen mode

Align items is set to flex start

3.Flex-end

This value will align the items at the bottom of the container.

 .container{
    display: flex;
    align-items: flex-end;
 }
Enter fullscreen mode Exit fullscreen mode

Align items is set to flex end

4.Center

This value will align the items at the center of the container.

 .container{
    display: flex;
    align-items: center;
 }
Enter fullscreen mode Exit fullscreen mode

Align items is set to center

Align-content

This property is used to align the flex lines. This only applies if you have set your container to wrap flex-wrap: wrap and if you have more than one row of flex items.

To better demonstrate this property, I have set the height to 500px and flex-wrap property to wrap.

1.Stretch

This is the default value. It will stretch the existing lines to take up the remaining space.

 .container{
    display: flex;
    flex-wrap: wrap;
    align-content: stretch;
 }
Enter fullscreen mode Exit fullscreen mode

Align content is set to stretch

2.Flex-start

This value will display the flex lines at the start of the container.

 .container{
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
 }
Enter fullscreen mode Exit fullscreen mode

Align content is set to flex start

3.Flex-end

This value will display the lines at the bottom of the container.

 .container{
    display: flex;
    flex-wrap: wrap;
    align-content: flex-end;
  }
Enter fullscreen mode Exit fullscreen mode

Align content is set to flex end

4.Center

This value will display the lines at the center of the container.

 .container{
    display: flex;
    flex-wrap: wrap;
    align-content: center;
 }
Enter fullscreen mode Exit fullscreen mode

Align content is set to center

5.Space-around

This value will distribute the lines evenly with space around the lines.

    .container{
      display: flex;
      flex-wrap: wrap;
      align-content: space-around;
    }
Enter fullscreen mode Exit fullscreen mode

Align content set to space around

6.Space-between

This value will distribute the lines equally in the container. The first line is at the start of the container while the last one is at the end.

    .container{
      display: flex;
      flex-wrap: wrap;
      align-content: space-between;
    }
Enter fullscreen mode Exit fullscreen mode

Align content is set to space between

This is the first part of a two-post series that I plan to write about CSS flexbox. If you have anything to add or any questions do so in the comments.

Thanks for reading!

Top comments (5)

Collapse
 
stokry profile image
Stokry •

I built a simple Firefox addon, this extension is easy to use, you can make grids, columns, experiment with all flexbox properties. Flexo will generate CSS that you can use in your code. Here it is: link

Collapse
 
clem_corbin profile image
Clément Corbin •

Thanks for this article! In addition, I'd recommend the "Complete Guide to Flexbox" by CSS-Tricks -> css-tricks.com/snippets/css/a-guid...

Collapse
 
gregorgonzalez profile image
Gregor Gonzalez •

I knew about the basics but this is better. Flexbox is so powerful. Thank you for sharing

Collapse
 
anitajoseph profile image
Anita Joseph •

Thanks for this article. It s gud to see the flex méthode on various pages and on more sites,👍

Collapse
 
seyeolajuyin profile image
Seye Olajuyin •

Flexbox truly makes designing a lot easier. You get to have your elements evenly spaced without overlapping. Thanks for the article!

Read next

codemee profile image

HTML meta 標籤中 viewport 的設定

codemee -

otumianempire profile image

JavaScript Essentials: Part 7

Michael Otu -

techelopment profile image

Embed HTML Files Without Using Server Side Scripting or JavaScript

Techelopment -

msnmongare profile image

M-Pesa Express (STK Push) API Guide

Sospeter Mong'are -