One thing I see a lot of beginners do, is gloss over fundamentals instead of digging deep on them.

Flexbox is not one of those fundamentals you want to skip if you value your time.

A quick run through just a couple examples and we can break down the most important flex properties with clear examples to help you level up your web development skills.

Here I'll cover the most important properties and their shorthands, and the most common layouts.

Learn these, and you'll be able to easily nest them together to build just about any layout you want.

I cover: the axis and how it works with direction, alignment, gap, order, wrapping, flex basis, grow, and shrink.

These properties are covered:

  • display: flex
  • flex
  • flex-wrap
  • gap
  • flex-basis
  • flex-grow
  • flex-shrink
  • order
  • flex-direction
  • flex-flow
  • justify-content
  • align-items
  • align-content

Check out our video and comment if you have any questions!

Want a specific webdev tutorial? Comment on the video and subscribe to our channel. We'd love to make valuable content, so feedback and suggestions are extremely appreciated!

Nick Adams - Founder of Arcane Web Design
Nick Adams | Founder of Arcane Web Design

With a decade of web design and development experience, Nick Adams has a proven track record of creating impactful digital solutions for businesses across various sectors. He's honed his skills in web design, front-end development, back-end development, web accessibility, and has helped companies improve foot traffic through improved search engine rankings. He's won several awards in graphic and web design.