Flexbox Crash Course

If you know me (from any online community) then you should know Flexbox happens to be my favorite concept in CSS. I find it beautiful.

This lesson will NOT teach you everything about Flexbox. You will, however, get a headstart on what flexbox is, and even get to use it in the sign-up project.

What is Flexbox

Flexbox is got a technical definition. For the sake of this course, I’ll skip the technicalities.

You may see flexbox as the layout ninja for CSS.

When you need to deal with the layout in your styles, the CSS Flexbox model is likely to be your best bet.

How does it Work?

Flexbox feeds largely on the parent-child relationship in a given DOM structure.

Flexbox is kicked off by making a parent element a flex container

Forget the lingo. It is like saying, Oh, I have found this parent element which I need for my layout. Alright, let me hand over to it some flexbox super powers

Yeah, that’s it.

How Do you Hand Over the Flexbox Super Powers?

Pretty simple.

Assuming the parent element in question is a div with a class name of flexy, just do this:

.flexy {
	display: flex
}

Is that it?

Yes!

What’s so Special?

The special bit is, display: flex. It hands over the flexbox superpowers​ to the .flexy div.

What May I do With the Flexbox Super Powers?

Power is enjoyed when used.

The flexbox power handed over to the parent element makes no sense if you do not make use of it.

Of the many things you can do with flexbox, a simple one is to center a child element within a parent element

This centering will be along both sides. Vertical and Horizontal.

How to Vertically Center an Item

When you hand over the flexbox superpowers to an element, eg .flexy, the children element within this parent are called flex-items

Also, the Superman can fly, but he has to clench his fist and jump up first. Spiderman has webs, but he also needed to learn how to spin them with precision.

The same goes for the Flexbox superpowers.

It does come with the responsibility of learning some keywords. Those are its own superpower armory.

To vertically center the items within a parent element, do this:

	.flexy {
  	align-items: center
  }
  
  

Do you see the keyword, align-items?

It aligns the children of the parent element to the center - along the vertical.

How to Horizontally Center an Item

Thanks to the flexbox superpowers!

To horizontally center an item within a parent element, do this:

	.flexy {
  	justify-content: center
   }
   

Do you see the keyword, justify-content?

It is responsible for aligning items along the horizontal.

How then do you perfectly Center an Item?

“Perfectly center” here refers to centering along the horizontal and vertical.

The solution is simple.

Just combine all the tricks above, like so:

	.flexy {
  	display: flex;
  	justify-content: center,
    align-items: center
   }
   

Let’s see that at play!