A complete guide on Flexbox

Flexbox is a tool built into CSS, meant for customising complex layouts of elements within.

Fun fact: before Flexbox, a lot of custom layouts in websites were done in a few ways:

Way back then, we used float property for having complex elements alignments. This proved to be pretty tricky when responsive layouts became needed!

We also used to have complex layouts using the <table> element! This was also tricky as conforming with semantic HTML became more prevalent.

Enable Flexbox with the following CSS property

                    #element {
                        display: flex;
                    }
                

Layouts are declared using the following property:

                    flex-direction:
                

There are four options for row and column layouts, being left-to-right, right-to-left, top-to-bottom, and bottom-to-top:

left-to-right: row

Flexbox alignments are declared using the following CSS property:

                    justify-content:
                

There are six values for these:

• Everything aligned to the left: flex-start
• Everything aligned to the right: flex-end
• Everything aligned to the center: center
• Everything aligned with space between each other: space-between

Flexbox spacing is declared using the following CSS properties:

• gap: `SINGLE VALUE`
• gap: `ROW` `COLUMN`
• raw-gap:
• column-gap: