AssignmentFB003

Flexbox Parents - wrap

From time to time you will encounter situations when you want your flex children elements to wrap onto multiple rows/columns. The flex-wrap property of the parent element allows flex children elements to do this.

Flexbox children elements are often given a width or a flex-basis (preferred), however, flexbox will ignore width and flex-basis settings in order to fit flex children elements onto a single row. One way to overcome this is to set min-widths for flexbox children elements.

Things to remember:

  • flex-basis overrides width settings
  • min-width settings override flex-basis settings
  • As expected, justify-content and align-items can be used with wrapped flexbox children elements. In addition, you can now use align-content for further control over wrapped flex children elements.

    Please experiment with flex-direction column on your own, but those settings should act as expected. Again, if the flex-direction is set to column, the function of justify-content and align-items switch roles. In this case, justify-content works vertically and align-items works horizontally.

    Make sure to label your work so I know which property you applied.

    In order to get credit, create four parent divs (50% x 500px) and three children divs (150px x 100px) within each parent. Change the parent div to display:flex. Also, change the property values to any of the suggested property values. Please label your work and let me know which property values you applied.

    .parent001

    flex-direction:row

    flex-wrap: wrap-reverse

    Flex Item 1
    Flex Item 2
    Flex Item 3
    Flex Item 4
    Flex Item 5

    .parent002

    flex-direction:row

    justify-content: space-between

    flex-wrap: wrap-reverse

    Flex Item 6
    Flex Item 7
    Flex Item 8
    Flex Item 9
    Flex Item 10

    .parent003

    flex-direction: row

    align-items: flex-start

    flex-wrap: wrap

    Flex Item 11
    Flex Item 12
    Flex Item 13
    Flex Item 14
    Flex Item 15

    .parent004

    flex-direction: row

    align-content: center

    justify-content: center

    flex-wrap: wrap-reverse

    Flex Item 16
    Flex Item 17
    Flex Item 18
    Flex Item 19
    Flex Item 20
    Flex Item 21