Loading...

We have learned how to take advantage of the flexbox feature to dynamically align and disperse content items.

Before moving onto your quiz, practice identifying flexbox properties with the activity below. Look at each example, and select which property and value is being demonstrated.

practice image 1

  1. justify-content: flex-start
  2. align-items: flex-start
  3. align-content: flex-start
  4. align-self: flex-start

 

 

 

 

practice image 2

  1. flex-wrap: wrap
  2. flex-wrap: wrap-reverse
  3. align-content: flex-end
  4. align-content: stretch

 

 

 

 

practice image 3

  1. flex-direction: column
  2. flex-direction: column-reverse
  3. margin-right: auto
  4. flex-wrap: nowrap

 

 

 

 

practice image 4

  1. align-items: flex-start
  2. justify-content: flex-start
  3. align-items: stretch
  4. align-content: stretch

 

 

 

 

practice image 5

  1. align-items: flex-start
  2. align-items: center
  3. align-content: center
  4. align-self: center

 

 

 

 

practice image 6

  1. justify-content: space-around
  2. margin: auto
  3. margin-left:auto and margin-right:auto
  4. any of the above

 

 

 

 

Summary

Questions answered correctly:

Questions answered incorrectly: