THE BASICS

What is Flexbox?

To start, Flex Box is "Flexible Layout". This is done by utilizing various CSS commands which increase layout efficiency by making it easier to align and distribute space among items in a container, even when their size is unknown. We will start with the first three basic commands.

justify-content

flex-start: Items align to the left side of the container.
flex-end: Items align to the right side of the container.
center: Items align at the center of the container.
space-between: Items display with equal spacing between them.
space-around: Items display with equal space around them.

align-items

flex-start: Items align to the top of the container.
flex-end: Items align to the bottom of the container.
center: Items align at the vertical center of the container.
baseline: Items display at the baseline of the container.
stretch: Items are streched to fit the container.

flex-direction

row: Items are placed the same as the text direction.
row-reverse: Items are placed opposite to the text direction.
column: Items are placed top to bottom.
column-reverse: Items are placed bottom to top.

Here are some css examples.

So here we are going to use justify-content andspace-between to add equal space between Joels

#part1 {

display: flex;

justify-content: space-between;

}

Here we will use justify-content andalign-items to put Joel in the exact center of the div.

#part1 {

display: flex;

justify-content: center;

align-items: center;

}

Here we will use align-self andalign-items to put one Joel in the exact center, at the bottom of the div.

#part1 {

display: flex;

align-items: flex-start;

justify-content: space-between

}

.joel1 {

align-self:flex-end;

}

This is what they look like.