Notes

FLEX BOX NOTES

1 : display : flex // referred as the container, makes the inner elements a flex items and divide them to take available width as per their respective width.
2 : flex-grow : 1 // defined as the growth rate, if 1 than every item will have same growth rate, varies if we assign someone more growth rate than it will grow faster respect to its lower sibling.
3 : flex-shrink : 1 // Higher the shrink rate, element shrinking increases.
4 : flex-wrap : wrap // It wraps the elements and push them down if required width is not fulfilled avoid scrolling.
5 : flex-wrap : wrap-reverse // It is opposite of wrap, wraps element and push them above, avoid scrolling. Also the pushed will take the the whole available width as per their respective growth-rate
6 : flex-wrap : nowrap // it does not allow adjusting width, stays with the original defined width, allows scrolling. By default flex items have the nowrap property.
7 : flex-basis : 500px // can be understood as min width but if the available screen is also less than 500px than it will shrink and will not cause scrolling, avoid scrolling.
Short hand : flex : [ 'flex-grow', 'flex-shrink' , 'flex-basis' ] so, eg : flex : 1 0 200px //
Justify-content : flex-start / flex-end / center / space-centered / space-around. // shifts contents respectively on main-axis only. Remember : Justify-content is a main axis prop
flex-flow : row / column / row-reverse / column-reverse // By default it is row, In row, x-axis is the main axis and y is cross axis. In column, y axis is now main axis and x axis is cross axis. whereas row -revers and column reverse bot opposite initial position of elements
align-items : Now this is cross axis function, similar as the justify-content but for the cross axis.