Display flex notes

display-flex.md

What is the flex box?

The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space or shrinks them to prevent overflow.

https://stackoverflow.com/questions/37815450/flex-items-ignoring-width

Key points from today's lesson

1. Apply display: flex; on the parent of the elements you are trying to arrange.

2. justify-content and align-items allows you to move the elements left and right, up and down

   • If flex-direction is row or row-reverse (default value),
     • justify-content will move elements left and right
     • align-items will move elements up and down
   • If flex-direction is column or column-reverse,
     • justify-content will move elements up and down
     • align-items will move elements left and right

3. justify-content takes the following values:

   • flex-start
   • flex-end
   • center
   • space-between
   • space-around
   • space-evenly

4. align-items takes the following values:

   • flex-start
   • flex-end
   • center
   • baseline
   • stretch

5. flex-wrap allows you to spread your elements out if they don't all fit in the same row

   • They would go to a new row instead of getting squished

There are too many things to memorise! I can't remember them all!

That is perfectly fine! The key point is understand how display: flex; works and what are the things you can do with it. It is okay if you can't remember them all at once, you can always Google or ask us! 😃

Helpful resources

Cheatsheet

Fun game to learn more about flex

More about align items

More about justify content