Flexbox

Flexboxes is a great way to structure your pages elements. For example if you're having a landing page where you want to store different components of the page.

The Flex container can be described as the element that decides the "general" rules. The Flex Items are the direct children of the Flex container.

Main axis is the direction where the Flex Items are laid out. Horizontal or Vertical.

Cross axis is either Row or Column.

Imagine having a landing page

First you might want to have your header. Flexbox can align navigation items horizontally and center them or space them out evenly.

Secondly you might want to have the Hero section. Here you can place your CTA (Call to Action), button or headline.

Flexbox makes it easy to display features or services in a grid-like fashion, responsively adjusting the number of items per row as the viewport changes.

Lastly you could create a footer. Here you can align and distribute the elements, like contact info, social media links, or navigation items.

My go to is always this page