Flex Property Examples

Using the jsbin below, change the following properties and observe the result:

  1. Change the value of flex-direction property of the .container selector to the each of the following and observe the result:

    • column
    • row-reverse
    • column-reverse

  2. With the flex-direction set to row, change the value of justify-content property of the .container selector to the each of the following and observe the result:

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

  3. Follow all of the steps laid out in #2 above but this time set the flex-direction set to column and observe the changes

  4. With the flex-direction set to row, change the value of align-items property of the .container selector to the each of the following and observe the result:

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

  5. Follow all of the steps laid out in #5 above but this time set the flex-direction set to column and observe the changes

  6. Spend 5 minutes changing both the values of flex-direction, justify-content and align-items and observe the result

JS Bin on jsbin.com