CSS flex-wrap Property

The CSS flex-wrap property defines whether the flexible items should wrap or not.

Demo:

Syntax:

flex-wrap: nowrap|wrap|wrap-reverse;

nowrap (default) – defines that the flexible items will not wrap.

wrap – defines that the flexible items will wrap if necessary.

wrap-rewerse – defines that the flexible items will wrap, if necessary, in reverse order.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#box-content {
  width: 200px;
  height: 200px;
  border: 3px solid #333;
  display: flex;
  flex-wrap: wrap;
}

.a, .b, .c, .d, .e, .f {
  width: 50px;
  height: 50px;
}

.a {
  background-color:#264653;
  color: white;
}

.b {
  background-color:#2a9d8f;
}

.c {
  background-color:#e9c46a;
}
.d {
  background-color:#f4a261;
}

.e {
  background-color:#e76f51;
}

.f {
  background-color:#264653;
  color: white;
}
</style>
</head>
<body>

<div id="box-content">
  <div class="a">1</div>
  <div class="b">2</div>
  <div class="c">3</div>
  <div class="d">4</div>
  <div class="e">5</div>
  <div class="f">6</div>
</div>

</body>
</html>

Output:

Note: Internet Explorer 10 and earlier versions do not support the flex-wrap property!

Enjoy coding!

Share this: