Simple guide of Flexbox in Real Life🔥Part #2

If you have come until here you are prepared for working with Flexbox in real projects, but first read all this article.

An interesting property: wrap

First, we let's talk about the wrap, wrap is so useful property to defined If our items it adjusting in one line or allow the items to wrap as needed with this property.

It has 3 properties:

nowrap (default): all flex items will be on one line
wrap: flex items will wrap onto multiple lines, from top to bottom.
wrap-reverse: flex items will wrap onto multiple lines from bottom to top.

A combination between wrap and flex-direction: flow

If you needed use flex-direction and wrap in the same element, so flow is your solution to save your time and create more clarity and professional code

This is an example of how use this property:

.div {
flex-flow: column wrap;
}

I know that you are waiting for more property but I'm sorry it does not have more so important properties, If you want to read more about all flexbox properties clicking this URL, sorry it's a monetizable URL with them I pay my tomatoes