2018-02-13 03:50:31 -08:00
|
|
|
---
|
|
|
|
|
path: "docs/flex-wrap"
|
|
|
|
|
title: "Flex Wrap"
|
|
|
|
|
hasPlayground: true
|
2018-02-14 07:53:08 -08:00
|
|
|
initialPlayground: eyJ3aWR0aCI6NTAwLCJoZWlnaHQiOjUwMCwiY2hpbGRyZW4iOlt7fSx7fSx7fSx7fSx7fSx7fSx7fSx7fV19
|
2018-02-13 03:50:31 -08:00
|
|
|
---
|
|
|
|
|
|
2018-02-14 07:53:07 -08:00
|
|
|
## Flex Wrap
|
|
|
|
|
|
2018-02-14 07:53:08 -08:00
|
|
|
The `flexWrap` property is set on containers and controls what happens when
|
|
|
|
|
children overflow the size of the container along the main axis. By default
|
|
|
|
|
children are forced into a single line (which can shrink elements).
|
|
|
|
|
|
|
|
|
|
If wrapping is allowed items are wrapped into multiple lines along the main
|
|
|
|
|
axis if needed. `WRAP_REVERSE` behaves the same, but the order of the lines is
|
|
|
|
|
reversed.
|
|
|
|
|
|
2018-02-14 07:53:07 -08:00
|
|
|
<controls prop="flexWrap"></controls>
|
2018-02-14 07:53:08 -08:00
|
|
|
|
|
|
|
|
When wrapping lines [alignContent](align-content) can be used to specify how the
|
|
|
|
|
lines are placed in the container.
|
