👶 ONLY NECESSARY FLEXBOX CHEATSHEET MADE BY `A2K` WITH 💙

APPLYING FLEXBOX PROPERTIES TO AN UNORDER LIST OF ITEMS

• <ul></ul>
  is the flex container
• <li></li>
  are the flex-items
• ul:-
  display:flex
• li:-
  flex:1
• ul:-
  flex-direction: row(default)

MISSING FLEX : 1 PROPERTY

• MISSING
  flex:1
• ul:-
  display:flex
• ul:-
  flex-direction: row

WRAP AROUND IF THE FLEX ITEMS ARE MORE; DON'T MAKE HORIZONTAL SCROLLBAR (TRY REDUCING BROWSER WINDOW & COMPARE 1st WITH THE CURRENT ONE)

• <ul></ul>
  has flex wrap
• If the list items are more than usual,
• then we wrap it up so that
• the users can read all the items
• properly
• ul:-
  display:flex
• li:-
  flex:1
• ul:-
  flex-direction: row
• ul:-
  flex-wrap: wrap
• ul:-
  flex-flow: row wrap

CENTER THE CONTENT HORIZONTALLY (same as `text-align:center`)

• ul:-
  justify-content: center

• OTHER VALUES ARE :-
• ul:-
  justify-content: flex-start(default)
• ul:-
  justify-content: flex-end
• ul:-
  justify-content: space-between
• ul:-
  justify-content: space-around
• ul:-
  justify-content: baseline

CENTER THE CONTENT VERTICALLY

• ul:-
  align-items: center

• OTHER VALUES ARE :-
• ul:-
  align-items: stretch(default)
• ul:-
  align-items: flex-start
• ul:-
  align-items: flex-end
• ul:-
  align-items: baseline

POSITION THE ITEMS

• li:-
  align-items: auto(default)
• `align-items: auto` computes to parent's
  align-items value or stretch if the
  element has no parent.
• li:-
  align-items: center
• li:-
  align-items: stretch
• li:-
  align-items: flex-start
• li:-
  align-items: flex-end
• li:-
  align-items: baseline

ORDER IN FLEXBOX

• ul(1):-
  order: 0(default)
• ul(2):-
  order: 2
• ul(3):-
  order: 1
• ul(4):-
  order: 1
• ul(5):-
  order: -1

GROW IN FLEXBOX

• ul:-
  flex-grow: 0(default)
• ul:-
  flex-grow: 1

BASIS & SHRINK IN FLEXBOX

• ul:-
  flex-shrink: 1(default)
• 
  Try resizing the browser
• li:-
  flex-basis: 300px
• ul:-
  flex-shrink: 10