Simple Article on CSS Selectors
Css Flexbox Cheatsheet

Css Flexbox Cheatsheet

Aditya Bankar's photo
Aditya Bankar
·

8 min read

CSS FLEXBOX CHEATSHEET

Flexbox Cheatsheet

Display

Enable flex container, inline or block.

  • display:flex
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Flexbox</title>
    <style>

        .container{
            display: flex;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="container" style="background-color: black; width: 50%; height: 50%;">
        <div class="child1"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: green"></div>
        <div class="child2"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: orange"></div>
        <div class="child3"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: red"></div>
        <div class="child4"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: blue"></div>
    </div>
</body>
</html>

OUTPUT

display-flex.png

flex-direction

Specifies the direction of the flexible items.

  1. flex-direction: row;
  2. flex-direction: row-reverse;
  3. flex-direction: column;
  4. flex-direction: column-reverse;

1. flex-direction: row;

    <style>

        .container{
            display: flex;
            flex-direction: row;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="container" style="background-color: black; width: 50%; height: 50%;">
        <div class="child1"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: green"></div>
        <div class="child2"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: orange"></div>
        <div class="child3"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: red"></div>
        <div class="child4"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: blue"></div>
    </div>
</body>

OUTPUT

display-flex.png

2. flex-direction: row-reverse;

    <style>

        .container{
            display: flex;
            flex-direction: row-reverse;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="container" style="background-color: black; width: 50%; height: 50%;">
        <div class="child1"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: green"></div>
        <div class="child2"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: orange"></div>
        <div class="child3"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: red"></div>
        <div class="child4"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: blue"></div>
    </div>
</body>

OUTPUT

flex-direction--row-reverse.png

3. flex-direction: column;


   <style>

        .container{
            display: flex;
            flex-direction: column;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="container" style="background-color: black; width: 50%; height: 50%;">
        <div class="child1"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: green"></div>
        <div class="child2"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: orange"></div>
        <div class="child3"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: red"></div>
        <div class="child4"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: blue"></div>
    </div>
</body>

OUTPUT

flex-direction--column.png

4. flex-direction: column-reverse;

    <style>

        .container{
            display: flex;
            flex-direction: column-reverse;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="container" style="background-color: black; width: 50%; height: 50%;">
        <div class="child1"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: green"></div>
        <div class="child2"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: orange"></div>
        <div class="child3"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: red"></div>
        <div class="child4"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: blue"></div>
    </div>
</body>

OUTPUT

flex-direction--column-reverse.png

flex-wrap

Specifies whether the flex items should wrap or not.

  1. flex-wrap: nowrap;
  2. flex-wrap: wrap;
  3. flex-wrap: wrap-reverse;

1. flex-wrap: nowrap;

    <style>

        .container{
            display: flex;
            flex-wrap: nowrap;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="container" style="background-color: black; width: 50%; height: 50%;">
        <div class="child1"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: green"></div>
        <div class="child2"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: orange"></div>
        <div class="child3"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: red"></div>
        <div class="child4"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: blue"></div>
    </div>
</body>

OUTPUT

display-flex.png

2. flex-wrap: wrap;

    <style>

        .container{
            display: flex;
            flex-wrap: wrap;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="container" style="background-color: black; width: 50%; height: 50%;">
        <div class="child1"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: green"></div>
        <div class="child2"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: orange"></div>
        <div class="child3"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: red"></div>
        <div class="child4"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: blue"></div>
    </div>
</body>

OUTPUT

via GIPHY

" data-card-controls="0" data-card-theme="light">

via GIPHY

3. flex-wrap: wrap-reverse;

   <style>

        .container{
            display: flex;
            flex-wrap: wrap-reverse;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="container" style="background-color: black; width: 50%; height: 50%;">
        <div class="child1"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: green"></div>
        <div class="child2"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: orange"></div>
        <div class="child3"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: red"></div>
        <div class="child4"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: blue"></div>
    </div>
</body>

OUTPUT

via GIPHY

" data-card-controls="0" data-card-theme="light">

via GIPHY

justify-content

Property is used to align the flex items.

  1. justify-content: flex-start;
  2. justify-content: flex-end;
  3. justify-content: center;
  4. justify-content: space-between;
  5. justify-content: space-around;
  6. justify-content: space-evenly;

1. justify-content: flex-start;

    <style>

        .container{
            display: flex;
            justify-content: flex-start;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="container" style="background-color: black; width: 50%; height: 50%;">
        <div class="child1"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: green"></div>
        <div class="child2"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: orange"></div>
        <div class="child3"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: red"></div>
        <div class="child4"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: blue"></div>
    </div>
</body>

OUTPUT

display-flex.png

2. justify-content: flex-end;

    <style>

        .container{
            display: flex;
            justify-content: flex-end;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="container" style="background-color: black; width: 50%; height: 50%;">
        <div class="child1"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: green"></div>
        <div class="child2"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: orange"></div>
        <div class="child3"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: red"></div>
        <div class="child4"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: blue"></div>
    </div>
</body>

OUTPUT

justify-content--flex-end.png

3. justify-content: center;

    <style>

        .container{
            display: flex;
            justify-content: center;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="container" style="background-color: black; width: 50%; height: 50%;">
        <div class="child1"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: green"></div>
        <div class="child2"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: orange"></div>
        <div class="child3"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: red"></div>
        <div class="child4"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: blue"></div>
    </div>
</body>

OUTPUT

justify-content--center.png

4. justify-content: space-between;

   <style>

        .container{
            display: flex;
            justify-content: space-between;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="container" style="background-color: black; width: 50%; height: 50%;">
        <div class="child1"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: green"></div>
        <div class="child2"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: orange"></div>
        <div class="child3"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: red"></div>
        <div class="child4"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: blue"></div>
    </div>
</body>

OUTPUT

justify-content--space-between.png

5. justify-content: space-around;

   <style>

        .container{
            display: flex;
            justify-content: space-around;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="container" style="background-color: black; width: 50%; height: 50%;">
        <div class="child1"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: green"></div>
        <div class="child2"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: orange"></div>
        <div class="child3"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: red"></div>
        <div class="child4"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: blue"></div>
    </div>
</body>

OUTPUT

justify-content--space-around.png

6. justify-content: space-evenly;

    <style>

        .container{
            display: flex;
            justify-content: space-evenly;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="container" style="background-color: black; width: 50%; height: 50%;">
        <div class="child1"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: green"></div>
        <div class="child2"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: orange"></div>
        <div class="child3"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: red"></div>
        <div class="child4"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: blue"></div>
    </div>
</body>

OUTPUT

justify-content--space-evenly.png

align-items

Determines the behavior for how flex items are laid out along the cross axis on the current line.

  1. align-items: flex-start;
  2. align-items: flex-end;
  3. align-items: center;
  4. align-items: baseline;
  5. align-items: stretch;

1. align-items: flex-start;

    <style>

        .container{
            display: flex;
            align-items: flex-start;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="container" style="background-color: black; width: 50%; height: 50%;">
        <div class="child1"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: green"></div>
        <div class="child2"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: orange"></div>
        <div class="child3"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: red"></div>
        <div class="child4"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: blue"></div>
    </div>
</body>

OUTPUT

display-flex.png

2. align-items: flex-end;

     <style>
        .container{
            display: flex;
            align-items: flex-end;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="container" style="background-color: black; width: 50%; height: 50%;">
        <div class="child1"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: green"></div>
        <div class="child2"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: orange"></div>
        <div class="child3"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: red"></div>
        <div class="child4"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: blue"></div>
    </div>
</body>

OUTPUT

align-items--flex-end.png

3. align-items: center;

    <style>
        .container{
            display: flex;
            align-items: center;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="container" style="background-color: black; width: 50%; height: 50%;">
        <div class="child1"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: green"></div>
        <div class="child2"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: orange"></div>
        <div class="child3"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: red"></div>
        <div class="child4"><img src="/logo.png" alt="" style="width: 3rem; height: 3rem; background-color: blue"></div>
    </div>
</body>

OUTPUT

align-items--center.png

align-content

Aligns a flex container’s lines within when there is extra space in the cross-axis.

  1. align-content: flex-start;
  2. align-content: flex-end;
  3. align-content: center;
  4. align-content: space-between;
  5. align-content: space-around;
  6. align-content: stretch;

Flexbox children

_order__

Controls the order in which flex items appear in the flex container.

order: 1;

flex-grow

Allows you to define the ability for a flex item to grow.

flex-grow: 1;

flex-basis

This defines the default size of an element before the remaining space is distributed.

flex-basis: 50%;

flex-shrink

This defines the ability for a flex item to shrink.

flex-shrink: 1;

align-self

Sets the alignment for individual items.

align-self: flex-start|flex-end|center|baseline|stretch;

Learn Code Online