From time to time you will encounter situations when you want your flex children to wrap onto multiple rows/columns. The flex-wrap property of the parent element allows flex children elements to do this
Flexbox children emements are often given a width or 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 addition, you can now use align-items for further control over wrapped children elements.
(try wrap, nowrap, wrap-reverse)
justify-content:space-around and flex-wrap:wrap
(try space-around, center, flex-start, flex-end, space-between, wrap, wrap-reverse, or nowrap)
align-items:flex-end and flex-wrap:wrap
(try flex-end center, flex-start, baseline, wrap, wrap-reverse, or nowrap)
align-content: center, justify-content:center and flex-wrap:wrap
(try center, flex-start, space-around, space-between, wrap, wrap-reverse, or nowrap. Avoid stretch)