CSS — Part-9- Flexbox

The Flexible Box Module is a one-dimensional layout module. It is called one-dimensional because, at a time, a flexbox deals with one dimension either as a row or as a column.

It gives the ability to the container to alter its item’s width or height to fill the available space in the best possible way. It aims at providing an efficient way to lay out items in a container even when their size is unknown (thus the word ‘flex’).

Basics and Terminology

Some properties need to beset on the container and some on the children.

2 axes need to bekept in mind when working with flexbox — the main axis and the cross axis.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

• The main axis is the primary axis along which the items are laid out starting from the main-start and going to the main-end.
• The main axis is determined by the flex-direction and the cross axis runs perpendicular to it.
• flex-direction can take 4 possible values — row, row-reverse, column, and column-reverse.
• For row or row-reverse, the main axis runs along the inline-direction(horizontal)
• For column or column-reverse, the main axis runs along the block-direction (vertical)
• For a flex-direction set to either row or row-reverse —