Get started with Flexbox.

What is Flexbox?

Flexbox is a layout in CSS3. Flexbox is used to make responsive layouts and components on a webpage. Using is a good choice to use in CSS so you can design the page responsively. Here is a basic guide to getting starting with flexbox.

Consider the above image and try to understand a layout there is one container, and inside that two elements are placed. This is an important part to understand, then using flexbox will be easy. Now plot that container into an x-y axis coordinate, horizontal part in flexbox called the Main axis and vertical part is called the Cross axis.

Using Flexbox

Give property of display: flex; to element for using flexbox.

Flex-direction

Flex-direction property is used to give direction to element should be placed, four types of properties are defined.

• flex-direction: row; place flex-items in row (horizontal).
• flex-direction: row-reverse; place flex-items in row but in reverse order.
• flex-direction: column; place flex-items in column (vertical).
• flex-direction: column-reverse; place flex-items in column but in reverse order.

You can see in the example below.

Flex-wrap

Flex-wrap property is used for wrapping flex-items inside the flex-container.

• flex-wrap : nowrap will not wrap flex-item in flex-container.
• flex-wrap : wrap will wrap flex-item in flex-container if it not fit in container size.

You can see in the example below.

Justifying and aligning flex-item

Now, this is a very important property of flexbox and you will use it regularly.
Whenever we want to align flex-item to the Main axis (horizontally) use justify-content, and if you want to align flex-items to the Cross axis (vertically) use
align-items. Now let's see in detail.

Justifying content along with the Main axis (Horizontally).

• justify-content: flex-start will place flex-item to the start of flex-container (refer the first image above)
• justify-content: flex-end will place flex-item to the end of flex-container
• justify-content: center to center flex-items.
• justify-content: space-around` space up around item.
• justify-content: space-between uses the whole frame and space item between.
• justify-content: space-evenly space all item evenly

Aligning content along with the Cross axis (vertically).

All properties are the same as justify-content .

• align-items: flex-start will place flex-item to the start of flex-container (refer the first image above)
• align-items: flex-end will place flex-item to the end of flex-containers
• align-items: center to center flex-items.
• align-items: baseline place flex-item to base item.

Tip: Flexbox is a good option for centering things in CSS. Make sure whatever element you want to center their parent element would have width and height defined and give parent element justify-content: center and align-items: center .

Thanks for reading.

Comments

[ThemeSelection]

Great article, I would like to suggest Flexbox Froggy is a game for learning CSS flexbox. Check it out at flexboxfroggy.com/

[Madza]

Awesome, thanks for the suggestion 😉
Are you aware of something similar for CSS Grid, too?

[Arthur Nascimento Assunção]

Exists, it's cssgridgarden.com/

[virensuthar]

Thanks for your suggestion.

[Toby Parent]

Along the same lines, Flexbox Zombies is a great game that also drills users on CSS flex

[Eduardo Cookie Lifter]

Nice article, would be nice if you had included flex-shrink, and flex-order. These are just some of the few properties Ive yet to understand about flex box. But I concur, using align-items, justify-content and flex-direction are the most used and will probably get you far enough in designing layouts 👍😀

[virensuthar]

Yeah, flexbox has many more properties I just write for basic and most commonly use.
Will add it in a future blog.

[Madza]

Great visuals, what app/tool did you use? 🎨

[virensuthar]

Thanks, I use figma.