CSS Flexbox Tutorial for Beginners - Flex Direction - Playing Flexbox Zombies Pt. 1

In the first lesson of our flexbox zombies series we start off with css flexbox tutorial for complete beginners.

This was a very brief lesson but it served a purpose.

To activate flexbox just write display: flex.

You can activate the flexbox in a number of directions.

By default “flex-direction” is set to “row”. If you want that setting for the flex direction you don’t need to write anything because that is already set. Think about that pointing to the east.

You can also set the flex-direction to “row-reverse” this will set the flex-direction the opposite way from “row”. Think of the flex direction pointing to the west when you set this property.

We also have a “column” for flex-direction. When we set “column” think about the direction setting south.

Finally, for the last flex-direction option we can set it to “column-reverse”. Think about this as pointing up to the north in the opposite direction of the regular “column” property.

Thank you for watching.

Make sure to head over to flexboxzombies.com to check out this game. It’s well worth it for mastering flexbox for CSS.

Stay tuned for part two of the series.

css flexbox tutorial for beginners,css,css tutorial,css flexbox,flexbox tutorial,css flexbox tutorial,flexbox,tutorial,html,css grid,web development,html tutorial,flexbox grid,css tutorial for beginners,how to,flexbox css,how to create content using flexbox,flexbox layout,learn to use flexbox in css,how to use flexbox,css grid tutorial,how to align content using css flexbox,flexbox vs css grid,web development tutorial,css3,css for beginners,html css,