Flexbox

What is Flexbox?! Flexbox is also called CSS flexible box layout and helps to arrange rows and columns according to the user's needs. Flexbox works inside a parent container, making it easier for elements inside the container to get designed as required by the user.

Properties of Flexbox

display: flex; To apply flex in a class, it is essential to add 'display: flex;' in the HTML code.

flex-direction Flex directions help to give directions to the elements inside the parent container, the default is a row and with the help of flex directions, we can change it to a column, reverse row or reverse column.

flex-wrap Flex wrap is used when there are many elements in a container and it is not organised properly, then flex-wrap is used so that it gets aligned systematically. The default is 'nowrap' which means no change inside the container, but using flex-wrap we can wrap it or we can reverse wrap it.

flex-flow Flex flow is the shorthand properties of flex-direction and flex-wrap. Flex flow holds the capability of two properties because flex-direction and flex-flow are used very often while writing code. So, to save some time while writing code, flex-flow was introduced.

justify-content This property helps to align the items in horizontal form. The default value is 'flex-start' and others are center, flex-end, space-around, space-between and space-evenly.

align-items This property helps to align the items in vertical form. The values are the same as justify-content.

align-content This property helps to align the items in the container where there are big spaces in between. It only works where there are multiple lines and it doesn't have any effect where there's only one line.

#iwritecode