What is flex-wrap

How to use flex-wrap property?

Flex-wrap is the property of the flexbox. Flex-wrap means flex items when going to another device then he doesn't find space then it will be move in the other row. if we use Flex-wrap:nowrap; then our flex item box will not be flexible and all not go to the other row. when we use Flex-wrap:wrap-reverse; then it's going to in the reverse order. as given below screenshot.

The default value of the flex-wrap is the nowrap.

Flex-wrap have following value:

Flex-wrap:nowrap;

Flex-wrap:wrap;

Flex-wrap:wrap-reverse;

Flex-wrap:initial;

Flex-wrap:inherit;

Here is the flex-wrap example:

.flexContainer {

  display: flex;

  Flex-wrap:wrap;

  border: 1px solid #ccc;

  width: 400px;

}

.flexContainer .innerElement  {

  background: #0bf;

  text-align: center;

  font-size: 30px;

  padding: 20px;

  margin: 5px;

  font-size:16px;

  color: #fff;

}

<div class="flexContainer">

  <h1 class="innerElement"><strong>1</strong> flex-wrap </h1>

  <div class="innerElement"><strong>2</strong>2 flex-wrap

    <div class="abc">flex-wrap inner Content</div>

  </div>

  <span class="innerElement"><strong>3</strong>3 flex-wrap content</span>

  <strong class="innerElement"><strong>4</strong>4 flex-wrap content</strong>

</div>

flex-wrap: wrap;

flex-wrap: nowrap;

flex-wrap: wrap-reverse;

Note: Flex-flow have shorthand property for both flex-direction and flex-wrap as given below example:

.flexContainer {

  display: flex;

  /*Flex-wrap:wrap;*/

  flex-flow: row wrap;

  border: 1px solid #ccc;

  width: 400px;

}