Intro

Flexbox is going to change your perspective about web designing and again for the power of blog flexbox is a super powerful tool I guess it's a CSS property but it's a tool that I'm in love with I use this all the time I think it's one of the most empowering layout tools of the web

Flexbox Layout

Flexbox was the first CSS layout method that worked in a completely different way than normal CSS. Instead of worrying about block/inline elements flexbox worries about the main axis and a cross axis.

Flexbox Element

justify-start [default]

Places all items at the start of the main axis which is the left side of the axis by default.

.container {
  display: flex;
  justify-content: flex-start;
}

flex-end

Places all items at the end of the main axis which is the right side of the axis by default.

.container {
  display: flex;
  justify-content: flex-end;
}

center

Places all items in the center of the main axis. This is one of the easiest ways to center elements in CSS.

.container {
  display: flex;
  justify-content: center;
}

space-between

This takes all the extra space inside the container and evenly spreads it between each element to space them as far apart as possible from one another while filling the full container.

.container {
  display: flex;
  justify-content: space-between;
}