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 {
  displayflex;
  flex-directionrow;
  height200px;
  border1px solid #ccc;
  width800px;
}
.flexContainer .innerElement  {
  background#0bf;
  text-aligncenter;
  font-size30px;
  padding20px;
  margin5px;
  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 {
  displayflex;
  /*Flex-wrap:wrap;*/
  flex-flowrow wrap;
  border1px solid #ccc;
  width400px;
}

1 comment:

Note: Only a member of this blog may post a comment.

Copyright Reserved to Anything Learn. Powered by Blogger.