flex-wrap - HTML CSS CSS Property

HTML CSS examples for CSS Property:flex-wrap

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. flex-wrap

Description

The flex-wrap CSS property sets whether the flex items are put into a single line or wrap to multiple lines or columns based on the space available in the flex container.

The following table summarizes the flex-wrap Property.

Item Value
Default value: nowrap
Applies to:Flex containers
Inherited: No
Animatable: No.

Syntax

The syntax of the property is as follows: 


flex-wrap:     nowrap | wrap | wrap-reverse | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
nowrap all flex items are displayed in a single row or column.
wrap flexible items will be placed into multiple lines if necessary.
wrap-reverse same as the wrap, but items will wrap in the reverse order.
initial Sets this property to its default value.
inherit take the value of its parent element flex-wrap property.

The example below shows the flex-wrap property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS3 flex-wrap Property</title>
  <style type="text/css">
  .flex-container {<!--  w ww  .  jav a2s .c om-->
    width: 300px;
    height: 200px;
    font-size: 32px;
    border: 1px solid black;
    /* Safari */
    display: -webkit-flex;
    -webkit-flex-wrap: nowrap;
    /* Standard syntax */
    display: flex;
    flex-wrap: nowrap;
  }
  .flex-container div {
    width: 100px;
  }
  .item1 {
    background: #e84d51;
  }
  .item2 {
    background: #7ed636;
  }
  .item3 {
    background: #2f97ff;
  }
  .item4 {
    background: #9c82d2;
  }
</style>
 </head>
 <body>
  <div class="flex-container">
   <div class="item1">
    1
   </div>
   <div class="item2">
    2
   </div>
   <div class="item3">
    3
   </div>
   <div class="item4">
    4
   </div>
  </div>
 </body>
</html>

Related Tutorials