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:

As expected, justify-content and align-items can be used with wrapped flexbox children elements. In addtion, 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. Please label your work so I know which property you applied.

Flex-Direction:Row

flex-wrap:wrap

(try wrap or nowrap)
Item1
Item2
Item3
Item4
Item5

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

(try space-around, center, flex-start, flex-end, space-between, wrap or nowrap)
Item6
Item7
Item8
Item9
Item10

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

(try flex-end, center, flex-start, baseline, wrap or nowrap)
Item11
Item12
Item13
Item14
Item15

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

(try center, flex-start, flex-end, space-around, space-between, wrap, or nowra. Avoid stretch)
Item16
Item17
Item18
Item19
Item20
Item21