What the Flex Box?!

So here we are, you’re working on a project with CSS and and maybe some animation of some sorts and you can’t quite get that item or object to display correctly or maybe it’s taking up too much space or maybe not enough. Bummer. But, luckily for you there is a little trick some developers somewhere were like “HEY! I have an idea!”

They came up with this thing called “Flex box’. It’s a great tool to help you efficiently lay out, align, distribute space amongst items within your container and the best part… It even does so without even knowing or having a defined size of an item. How great is that? In my time here at The Iron Yard, oh yea I’m a student here learning Front-End Javascript, but during my time here so far we have had to use this concept on a couple of occasions. Now at first, I didn’t understand it but I have grown to know and actually kinda like it.

TER-MAN-OL-O-GY and FRIENDS !! KEY THINGS TO KNOW

(*might be important to remember, probably wanna remember this*) just sayin.

Let’s use a bit of code to explain and see how it works shall we?

Here we have some basic HTML :

<aside class='sidebar'>
<section>Sidebar Item 1</section>
<section>Sidebar Item 2</section>
<section>Sidebar Item 3</section>
</aside>

(This is a project we worked on for class as homework called “Flex Blog”, I know how ironic)

Anyway using this HTML I am going to demonstrate how to use “Flex” and the various properties that come along with it. So “flex” is a part of your styling sheet (CSS). So you would need to have a style.css file ready to go. In this particular instance I will be only working with my <aside class=sidebar>, mental note classes are a way to pinpoint a certain tag and in this case “sidebar” is the class.

Note: “Flex deals with the flex parent and Flex child” — Jordan Kasper.

.sidebar { display: flex; 
flex-grow: 1;
flex-direction: column;
align-items: center;
}

To further explain the flex parent and child attributes, here is a CSS rule in which the ‘sidebar’ selector is displaying flex making it the parent for this particular example. The ‘Display’ property is how it will show in the browser and the ‘flex’ value is the position in which the browser will show it. The ‘Flex-grow’ property shows how the ‘container’ divides up extra space, on the hand the ‘shrink’ property tells the browser how much room to leave for the child. The ‘Flex-direction’ property tells the browser how to position your “selector”. (Note- flex-direction has flex properties : row, row-reverse, column, column-reverse all of which are pretty self-explanatory).

You’ll notice the ‘Align’ property, quite simply it aligns things. Go figure. The align property has many different values, I’ll explain a couple and list the others that you’d want to look up.

  1. align-content: this property aligns your content within your container (remember that word? yeah it showed up again).

2. Align-self: aligns all of your flex items within your current line. Here’s a picture to demonstrate:

3. Align-items: Now this one has many values that can be used to show an item (the flex parent)…let’s start with stretch: This value allows all its items to be the same height.

Another value of align-item is flex-start and with flex-start it puts your items at the top edge of your page.

and if there is a start, that means there is an end! meaning Flex-end will align all your items at the bottom of the page. Sorry no well placed GIF here. I think you get the idea.

Lastly, center, you guessed it… it aligns your item to the center.

The final property with flex is justify-content, which in many ways acts just like align-items in that it uses flex-end and center, but it introduces two new properties: space-around and space-between.

As you can imagine these deal with spacing around and between your flex items.

Space-around:

I thought that was funny,

Lastly, space-between:

I hope you found this helpful and a little funny as I had a great time writing and putting together the visual for you. Catch ya later!

Like what you read? Give Carlyse Jordan a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.