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 overides width settings
• min-width settings overide 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.

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

(try wrap, nowrap, wrap-reverse)

justify-content:space-around and flex-wrap:wrap

(try flex-end, center, flex-start, baseline, wrap, wrap reverse, or no wrap)

align-items:flex-end and flex-wrap:wrap

(try flex-end, center, flex-start, baseline, wrap, wrap reverse, or no wrap)

align-content:center, justify-content:center, and flex-wrap:wrap

(try flex-end, center, flex-start, baseline, wrap, wrap reverse, or no wrap. Avoid stretch)