FlexBox

• Flexbox is a tool that greatly simplifies how to position elements in CSS. 
• There are two important components to a flexbox layout: flex containers and flex items. Any element can be a flex container and all the elements inside it are the flex items.
• A flex container is an element on the page that contains flex items.
• To designate an element as a flex container, set the element's display property to flex.
• Use display: inline-flex to make flex containers that are inline elements.
• If the parent container is too small, the flex items will shrink to accommodate the parent container's size.
• When we make a flex container all of its children move towards the upper left corner of the container by default.
• To position the items along the main axis(left to right) we use a property called justify-content. There are 5 commonly used values:

1. flex-start: All items will be positioned in order starting from the left of the parent container, with no extra space. (default)
2. flex-end: All items will be positioned in order, with the last item starting on the right side of the parent container with no extra space between them.
3. center: All items will be positioned in the center of the parent container with no extra space.
4. space-around: Items will be positioned with equal space before and after them.
5. space-between: Items will be positioned with equal space between them and no space before the first and after the last elements.
   

• The align-items property makes it possible to space flex items vertically (cross-axis). There are 5 commonly used values:

1. flex-start: All elements will be positioned at the top of the container.
2. flex-end: All elements will be positioned at the bottom of the container.
3. center: The center of all elements will be positioned at the center of the parent container.
4. baseline: the bottom of the content of all items will be aligned with each other.
5. stretch: If possible, the items will stretch from the top to the bottom of the container. Elements with a specified height will not stretch but ones with minimum height or no height will stretch (default)

• The flex-grow property allows us to specify if items should grow to fill a container and also which items should grow proportionally more or less than others.