My Understanding of flexbox through the help of Flexbox Froggy

The "flexbox" is a module used to arrange elements into containers with equal spaces between them.

.flexbox {
    display: flex;
}

Flexbox Froggy is a game created by codepip that enables one to learn flexbox properties. You're tasked with moving the frog or frogs from a location to their lilypads which are in another location using flexbox properties alone.

From levels 1 to 24, there are different tasks of increasing difficulty and different properties to be used but I'll talk about the justify-content alone.

JUSTIFY-CONTENT

Justify content is a flexbox property used to align items horizontally. Five values can be used with the justify-content property:

1. flex-start: This aligns the items to the beginning of the container.

    .flexbox {
        display: flex;
        justify-content: flex-start;
    }
   

2. flex-end: This aligns the items to the end of the container.

    .flexbox {
        display: flex;
        justify-content: flex-end;
    }
   

3. center: This aligns the items to the middle of the container.

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

4. space-around: This creates equal spaces around each item.

    .flexbox {
        display: flex;
        justify-content: space-around;
    }
   

5. space-between: This creates equal space between each item.

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