The gift of Flex box

One of the most difficult parts of CSS is organizing items, one of the most helpful tools is flex box. There are parent container is called the flex container, it allows all of the child elements to stay in the container. There is a separate element called flex items where you can manipulate the items in the container.

Justify content is the most useful feature of flexbox, it allows you to evenly space your text and it also works for images. Flex-start items are packed toward the start of the flex-direction. Flex-end items are packed toward the end of the flex-direction. Space-between items are evenly distributed in the line; first item is on the start line, last item on the end line.

For the child elements you can change the order. By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the flex container. Flex-grow defines the ability for a flex item to grow if necessary. It accepts a value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.

If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one of the children has a value of 2, the remaining space would take up twice as much space as the others (or it will try to, at least).