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.

    Flex Direction:Row

    flex-wrap:wrap-reverse

    Item 1
    Item 2
    Item 3
    Item 4
    Item 5

    justify-content:center

    flex-wrap:wrap-reverse

    Item 6
    Item 7
    Item 8
    Item 9
    Item 10

    align-items:flex-start

    flex-wrap:wrap

    Item 11
    Item 12
    Item 13
    Item 14
    Item 15

    align-content:center

    justify-content:space-evenly

    flex-wrap:wrap

    Item 16
    Item 17
    Item 18
    Item 19
    Item 20