It tells browser that we want to use flexbox n our container
display: flex;
It specifies the direction of the flexbox item
<span>flex-direction: row;</span>
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
It used to align items
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
It helps to align items along cross axis
align-items: center;
align-items: flex-start;
align-items: flex-end;
align-items: baseline;
align-items: stretch;
It is used to align items with multiple lines
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-between;
align-content: space-around;
align-content: stretch;