flex-flow - HTML CSS CSS Property

HTML CSS examples for CSS Property:flex-flow

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

Description

The flex-flow CSS property is a shorthand property for setting the flex-direction and flex-wrap individual properties.

The following table summarizes the flex-flow Property.

Item Value
Default value: row nowrap; See individual properties
Applies to:Flex containers
Inherited: No
Animatable: No.

Syntax

The syntax of the property is as follows: 


flex-flow:     [ flex-direction flex-wrap ] | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
flex-direction how flex items are placed in the flex container.
flex-wrap whether the flexible items should wrap or not.
initialSets this property to its default value.
inherittake the value of its parent element flex-flow property.

The example below shows the flex-flow property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS3 flex-flow Property</title>
  <style type="text/css">
  .flex-container {<!--  w ww  .  j  av  a  2  s.  c  o  m-->
    width: 300px;
    height: 200px;
    font-size: 32px;
    border: 1px solid black;
    /* Safari */
    display: -webkit-flex;
    -webkit-flex-flow: row wrap-reverse;
    /* Standard syntax */
    display: flex;
    flex-flow: row wrap-reverse;
  }
  .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