Day18 #100DaysOfCode
Here is the index.html of the file we will be working with.
Flex-Direction: The ‘flex-direction: row’ property is the default of any flex container. It spans the content vertically to hit the height of the container. It stacks them side by side.
The ‘flex-direction:column’ instead stacks the contents vertically on top of each other.
When defining the flex-direction as row or column, we have two accesses which are the main accesses like justify-content and align-items.
The main access when it is row, is from left to right just like in the first code snippet. If it is column, it goes from top to bottom just as in the second code snippet.
There is also flex-direction: row-reverse or column reverse which are the cross accesses, the access starts in reverse. They are the cross accesses
Clearly, main access runs from left to right or top to bottom while cross access runs from right to left or bottom to top.
Flex-wrap:
Suppose the flex elements have total widths bigger than your screen size, the ‘flex-wrap: wrap’ property comes in to evenly stretch the elements in the screen.
Suppose I give each box a width of 300px which is a total of 300px*10, that is 3000px. The problem is, my screen is not 300px wide.
Here flex tries to share the flex elements evenly on the screen.
Thats where we apply the flex-wrap on the flex container. Notice the extra spaces, we’ll fix that by using
However, there is also the ‘wrap-reverse’ which changes our main access and cross access from right to left and bottom to top respectively.
