5 Minutes to Flexbox

I believe that flexbox is a revolution in CSS. The reason is that it makes it easier for us to create one-dimensional layouts. If you don’t know about one-dimensional layout, it is just laying out items in one direction or axis. For example, when you are laying out the items of a navbar in a single row or column.

Navbar image
In this case, the direction can be from left to right or vice versa.

However, if you are planning to use two directions then flexbox might not come in handy. But enough talks, let’s now move on and see how to use flexbox to build the layouts.

Understanding axis in flexbox

The whole flexbox is built upon the concept of the axis, so it is good to know what the axis is. As mentioned above, the axis is simply the direction of the content. There are only two axes when we talk about flexbox. First, we have the main axis and then we have the cross axis. It is important to understand these two topics as these are the two most important things in flexbox. Once you wrap your head around it, flexbox will be very easy for you. We will talk about the axes a little bit later in the article because there is something you need to know before we dive deep into how the flexbox works.

Containers in flexbox

Containers are one of the most fundamental topics in the flexbox. To use flexbox, you must know the concept of flexbox containers. So, in flexbox container is the area that you define to use flexbox. In simple words, it is the area where you can use the flexbox. It is called a flex container. Flex containers have items inside them known as flex items.

Flex containers and flex items
The white box is the container and the red boxes inside it are the items

To make any HTML container, a flex container all you need to do is to change the display property of the container to flex.

display: flex;

This will allow you to apply flexbox properties to the container, and now we have a flex container and its children elements automatically become flex items. Now you can use flexbox in whatever way you want. But first, let’s look at some of the other things that you need to know to use flexbox.

Axes in flexbox

Remember that I talked about directions at the beginning, now it’s time to take a deep look into that. There are two directions or, to be more precise, axes in the flexbox: main axis and cross axis.

Main axis

It defines the direction in which the flex items go. The main axis of a container is specified by the property flex-direction. This property can take several values like row, column, etc. I’m not mentioning the properties because it will make the post unnecessarily lengthy. But you can always look into the documentation like w3schools or just a simple google search will provide you with what you want.

Cross axis

It is the direction perpendicular to the main axis. If the main axis is the x-axis, say, then the cross axis will be in the y-direction.

flex directions

Flexbox is a really long topic to fit into a small post like this one. But I’m sure that if you know the stuff above, then flexbox will be a little bit easier for you to use. What I can do is to link some great resources that you can use to learn flexbox. They really helped me and I hope that they will help you as well.

  1. https://flexbox.malven.coThis is the simple visual cheatsheet for flexbox which will come into handy if you are a beginner in flexbox.
  2. http://www.flexboxdefense.comIf you want to learn flexbox the fun way, you can use this resource to accomplish it. You need to place towers using flexbox in order to win the game. They provide you the guide before the game starts and you have 12 levels to complete. Good Luck!!
  3. https://flexbox.webflow.comAt Webflow they have created some of the most common layouts using flexbox. Not only that they teach you how to create every one of them. This will really help you once you have understood the basics of flexbox.

These were the top 3 resources that I wanted to let you know about. They personally have helped me a lot and hope that you can get better at flexbox using these resources.

I wish you luck on your flexbox journey!!

--

--

--

Web Developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

The Terrifying Details of Installing NVIDIA’s CUDA Drivers on OpenSUSE for Machine Learning

Advanced Containers: GUI Web Browser on Docker Container

CodeChef vs CodeForces

Ganttis + Xamarin.iOS

Triggering Voiceover Clips OnTriggerEnter

Service Provider in Laravel

Semantics to increase synergies and move towards the Industry 4.0 Digital Thread (1/2)

OpenCV(Python)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Arun Bohra

Arun Bohra

Web Developer

More from Medium

How to Add or Remove Input Fields Dynamically Using jQuery?

CSS Basics #3: Position, Overflow and Alignment

Top 5 CSS Frameworks to check out in 2022.