Flexbox Tutorial

Learning

You will be learning how to use Flexbox and Flex properties. This topic is very complex and will take as much time to learn as CSS basics. Take it slow it will be difficult to wrap the concepts around in your head

  1. Watch this video:
  2. Review this cheat sheet:
  3. Do watch a quick review to ensure you understand the material. It'll only take 100s!
  4. Proceed towards the Practice section.

Practice

Create a new folder titled "attempt" and create an HTML and CSS file. You will replicate the following examples in those files. After, you will push your attempt to Github. You are free to use any resources at your disposal with the exception of viewing this page source.

1. Position the items (2) side by side in your own HTML.

1
2

2. Position the items (3) side by side in your own HTML. If you wrote the above example correctly, you should not even need to touch the CSS.

1
2
3

3. Position the items (2) side by side in your own HTML. Add some space between them and reverse them.

1
2
3

4. Position the items (4) side by side in your own HTML. Make them responsive. This means when the window width gets smaller, items are pushed down onto a new line. Add gaps but do not reverse the order.

1
2
3
4

5. Position the items (3) side by side in your own HTML. Make the middle one 2 times as large as the other boxes

1
2
3