CSS flex-direction – flexbox container ordering and orientation

The contents of a flex container can be laid out in any direction and in any order using flex-direction. It is flex container property.

Syntax:

.someflexcontainer {
  display: flex;
  flex-direction: row;
}

CSS property flex-direction

CSS version: CSS 3
Value: row | row-reverse | column | column-reverse
Initial: row
Applies to: flex containers
Inherited: no

flex-direction values

row left to right (for direction ltr). right to left (for direction rtl).
row-reverse right to left (for direction ltr). left to right (for direction rtl).
column top to bottom
column-reverse bottom to top

Example – flex-direction

In the following code, CSS property flex-direction can be changed to the following values
  • row
  • row-reverse
  • column
  • column-reverse
<style>
.fbox {
  display: flex;
  flex-direction: row;
  width: 200px; background-color:gray;
}
.child {
  background-color:green;
  padding: 3px; margin: 3px;
}
</style>

<div class=fbox>
<div class="child">div1</div>
<div class="child">div2</div>
<div class="child">div3</div>
<div class="child">div4</div>
</div>
flex-direction refresh

Specification and Browser compatibility

SpecificationStatusCategories
Flexible Box Layout ModuleW3C Working DraftCSS3
Desktop
ChromeFirefoxIEEdgeSafariOpera
Yes 29+ Yes 28+ Partial 11+ Yes 12+ Yes 9+ Yes 12.1+
Mobile
Android ChromeAndroid FirefoxiOS SafariIE MobileOpera Mobile
Yes 47+ Yes 44+ Yes 9.0-9.2+ Yes 11+ Yes 12.1+
source: caniuse.com
Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments