What is flex-direction?

How to use the flex-direction property?

Flex-direction is the property of the flexbox. Flex-direction means what direction going flex items as row or column. Row and column have the reverse option also, flex-direction will not work without flexible item it's mandatory.

The default value of the flex-direction is the row.

Flex-direction have following value:

Flex-direction: row;

Flex-direction: row-reverse;

Flex-direction: column;

Flex-direction: column-reverse;

Flex-direction: initial;

Flex-direction: inherit;

Here is the flex-direction example:

.flexContainer {

  display: flex;

  flex-direction: row;

  height: 200px;

  border: 1px solid #ccc;

  width: 800px;

}

.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-direction:Row </h1>

  <div class="innerElement"><strong>2</strong>2 flex-direction:Row

    <div class="abc">flex-direction:Row inner Content</div>

  </div>

  <span class="innerElement"><strong>3</strong>3 flex-direction:Row content</span>

  <strong class="innerElement"><strong>4</strong>4 flex-direction:Row content</strong>

</div> 

Flex-direction:row;

Flex-direction:row-reverse;

Flex-direction:column;

Flex-direction:column-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;

}