Css Flexbox Cheat Sheet

flexbox - used to align items perfectly.
grid - can also be used to align items.

flex container - is the element that holds flex items.
display:flex.
flex items - direct children of flex container
eg:
<div class="flex-container">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>
Flex Container Properties:

flex-direction - row,column
flex-wrap -value:wrap( to adjust flex items to the next line, if all the items doesnt fit in one line, works only when the width or basis is specified.)
flex-flow
justify-content(main axis) = start,end,center,space-around,space-between
align-items(cross axis) = end,start,center(align-self:to align a single flex item[flex item proprety])
align-content

Flex item Properties:
order - values:1,2,3..(to change the order of items in flex container)
flex-grow - value:1,2,3..(size of flex item, when it grows)(it also take the whole width of the container)
flex-shrink - value:1,2,3..(size of flex item, when it shrinks)
flex-basis - same as width.
align-self = end,start,center(to align a single flex item specifically.)
shortcut= flex: flex-grow flex-shrink flex-basis