[CSS flexbox](https://www.educative.io/answers/what-is-a-css-flexbox) offers users powerful alignment options. A **flex container** groups multiple flex items together in order to control their representation. 

Among the many properties offered by the flex container, one of the most widely used properties is `flex-wrap`.

The `flex-wrap` property defines whether the flex items are forced into a single line or wrapped into multiple lines in case of an overflow.  This property accepts three values:

- **`nowrap`** - all flex items are aligned in a single line. This may cause the container to overflow.

> Flex items may also shrink in size to avoid container overflow.


.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.flex-items{
  margin: 10px;
}

codemirror

- **`wrap`**: flex items are aligned in multiple lines in case of overflow.


.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.flex-items{
  margin: 10px;
}

- **`wrap-reverse`**: flex items are aligned in multiple lines in case of overflow but i​n the reverse direction of `flex-direction`.

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap-reverse;
}

.flex-items{
  margin: 10px;
}

flex-wrap

The flex-wrap property defines whether the flex items are forced into a single line or wrapped into multiple lines in case of an overflow.  This property accepts three values:  nowrap - all flex items are aligned in a single line. This may cause the container to overflow.   Flex items may also shrink in size to avoid container overflow.  