Flex container
Enables flex layout
.container {
display: flex;
}
Flex items (children)
Children inside container. Can be aligned and spaced
align-items: center;
justify-content: center;
display: flex -> enable flex
container -> parent
items -> children
justify-content
Align items on the main axis (horizontal)
flex-start
center
flex-end
space-between
space-around
align-items
Align items on the cross axis (vertical)
flex-start
center
flex-start
stretch
baseline
justify-content -> horizontal alignment
align items -> vertical alignment