Flexbox Layouts (2)

The following file is required for this lesson:

• demo-flex-flow.zip

Demo Instructions

You can follow along with your instructor to complete this build and/or you can use this document as a guide in completing the demo build.

Steps

1. Download the demo-flex-flow.zip file from Moodle and extract its contents to a folder named demo-flex-flow.
2. The first goal of this demo should look like:
   
3. Open index.html in your browser to see something like:
   
   Question: What do you think you need to do to achieve the desired output?
4. Add the following style rules to your styles.css file:
   
   1. Add a .flex-container class:
      
   2. Modify the following code in your index.html:
      
      
5. There are other properties of flexbox that you can set. First you will look at flex-direction. Do each of the following and examine the output:
   
   1. flow:
      
      The output should not have changed.
   2. flow-reverse:
      
   3. column:
      
   4. column-reverse:
      
6. Now you can examine the flex-wrap property. First set the flex-flow to row, then do each of the following:
   
   1. nowrap:
      
      The output should be the same as shown in step 4b, or if you make your browser window narrower:
      
   2. wrap:
      
   3. wrap-reverse:
      
7. Finally, you can combine flex-direction and flex-wrap as flex-flow. First comment out all the style rules after display: flex; and do each of the following and examine the output.
   
   1. Default setting (flex-flow: row nowrap):
      
   2. flex-flow: row-reverse wrap:
      
   3. flex-flow: column-reverse wrap-reverse:
      
      There are other combinations which you can explore.

Resources

• Flexbox Resoources

Module Home

DMIT1530 Home