Today in class we will explore the use of flexbox by working on exercises from mozilla.developer.
Exercise 1: Wrapping
- You should have completed the Simple Example as homework. If not, do so now (we’ll call it Exercise 0).
- Now do the exercise titled Wrapping but with one caveat. They provide a link to a file for you to work with, but then ask you to add elements to the same file that are already there. I have modified a new version of the file so that it matches the exercise. Download it here, rather than the one that they provide.
Exercise 2: Flexible Sizing.
Click here to do the exercise.
Exercise 3: Horizontal and vertical alignment
This exercise explores just what the title implies: horizontal and vertical alignment of flexbox content. In flexbox, by default, content (in this exercise the content is made up of buttons) is spread along the horizontal axis and ‘stretches’ to fill the cross axis (aka vertical up and down axis).
I found their explanation about vertical stretching to be confusing until I played with the css code a while. A couple of tips.
- To start this exercise, I recommend that you simply add div {display: flex; } to your CSS instead of the three items that they ask for (shown below). Once you add the display:flex property, those buttons should stretch.
- Afterward, add the other two properties to further explore alignment.
Exercise 4: Nested flex boxes
This exercise is basically descriptive and illustrates how to create a more complex layout using flexbox. Essentially, you copy the code, look at the file in your browser and then read about it. Not much of an exercise, but read it, go through the motions and do your best to gain an understanding of how nested flex boxes work.