FlexBox Tutorial

Let’s talk about CSS

I feel like there are two types of people. There are those who enjoy/don’t mind CSS, and those who absolutely hate CSS. When I first started learning to style on the front end, I absolutely hated it.

My issue was that when I wanted to move a div or another element around, I had a problem with individualizing it from the others. I was using margins and padding to push elements across the screen.

Grid can be an alternative solution for this issue, but to me personally, flexbox is where it’s at. Here’s how you use it.

Intro To Flexbox -

Flexbox works by organizing elements inside of whatever container you want to use flexbox on.

Here’s an example.

(HTML)

<div class=’exampleContainer’>

<p>Hello 1</p>

<p>Hello 2</p>

<p>Hello 3</p>

<p>Hello 4</p>

</div>

Let’s say I wanted to organize the way that I display these paragraph tags. I want to line them up in the middle horizontally, and space them out evenly across the container they are in.

In my CSS, I could write -

.outsideContainer {

display: flex;

}

This initialized Flexbox on my container and lined my items together horizontally in the top left of the container div, and now I can now use justify-content and align-items to align them (either horizontally or vertically).

(CSS)

.outsideContainer {

height: 50vh; (just to give the elements room to move)

display: flex;

justify-content: center;

align-items: center;

justify-content: space-evenly;

}

Following this method of centering elements inside of their container, we can create graphs, charts, and have the freedom to create more custom layouts for a user’s experience.

While styling my options page for a project that I’m working on, I was able to make an option layout that is both dynamic and lines up consistently across other platforms.

Made w React

Flexbox is both powerful and extremely organized. This is only the start of what can be done.

That’s all for now, but I hope this was a helpful tutorial to learning how Flexbox can be used to organize elements for your project. Thanks for reading.

--

--

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