Table of Contents -:
Flex Box Introduction
Most used method
1-: flex-direction
2-: flex-wrap
Coming soon
Flex Box -:
Flex box works in 1D(Dimensonal) and when we are defining display: flex; basically, we are creating container and that is called flex container and whatever items are defined under that container those are called flex items and in flex we will be working in main axis and cross axis.
Note -: Below diagram is only applicable for default position.
By default, flex box work in row and we can change this as per our requirements using flex-direction and it goes from left to right.
Most Used Method in Flex Box -:
flex-direction -: Flex direction help to position the flex items basically what mean is you want to put item in row or column these things you can control using flex-direction. by default, flex direction value is row. due that only whenever you define flex all the item present in container will align in row.
Below is default behaver whenever you create flexbox.
Note -: If you want to check for other values, please click on “Edit ON CODEPEN” from there you can edit the CSS.
row(default)
column
row-reverse
column-reverse
Flex-wrap -: When you define a container as flex then flex will try to put all the content in the one line to change this behaver, we can use flex-wrap.
nowrap(default): all flex items will be on one line.
wrap: flex items will wrap onto multiple lines, from top to bottom. basically, when you start shrinking width and if width is less by that time one by one item will start moving to next line. in our case first item 8 → item 7 → item 6 will come to next line, and it will keep breaking in multiple lines.
wrap-reverse: flex items will wrap onto multiple lines from bottom to top. here all the things will be same the only difference is it will start coming to next line from item 1 to item 7 and item 8 will be in first line and if you still shrinking item 1 to item 6 and item 7 and 8 will be in first line and so on.