flex-direction - HTML CSS CSS Property

HTML CSS examples for CSS Property:flex-direction

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

Description

The flex-direction CSS property sets how flex items are placed in the flex container.

The following table summarizes the flex-direction Property.

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

Syntax

The syntax of the property is as follows: 


flex-direction:     row | row-reverse | column | column-reverse | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
rowThe flex container's axis has the same orientation as text direction.
row-reversestart and end points of the axis are reversed.
column The flex container's main axis to be the same orientation as the block axis of the text direction.
column-reverse Same as column, but the start and end points of the axis are reversed.
initialSets this property to its default value.
inherittake the value of its parent element flex-direction property.

The example below shows the flex-direction property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS3 flex-direction Property</title>
  <style type="text/css">
  .flex-container {<!--  ww w  . j a  va  2s . c o m-->
    width: 300px;
    height: 200px;
    font-size: 32px;
    border: 1px solid black;
    /* Safari */
    display: -webkit-flex;
    -webkit-flex-direction: row-reverse;
    /* Standard syntax */
    display: flex;
    flex-direction: row-reverse;
  }
  .flex-container div {
    -webkit-flex: 1; /* Safari 6.1+ */
    -ms-flex: 1; /* IE 10 */
    flex: 1; /* Standard syntax */
  }
  .item1 {
    background: #e84d51;
  }
  .item2 {
    background: #7ed636;
  }
  .item3 {
    background: #2f97ff;
  }
</style>
 </head>
 <body>
  <div class="flex-container">
   <div class="item1">
    1
   </div>
   <div class="item2">
    2
   </div>
   <div class="item3">
    3
   </div>
  </div>
 </body>
</html>

Related Tutorials