O'Reilly logo

HTML5 and CSS3 Transition, Transformation, and Animation by Gianluca Guarini, Aravind Shenoy

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Flex Container properties

We will now look at the various properties of Flex Container.

flex-direction

As we had seen earlier, the default direction is from left to right and the line is along the Main axis. However, the writing mode can be changed using the following values:

  • flex-direction: row-reverse;: This will swap the Main start and Main end. The direction will be along the Main axis but the direction will be from right to left.
  • flex-direction: column;: This will swap the Main axis and the Cross axis, following which the direction that the Flex Items are set will be vertical in nature.
  • flex- direction: column-reverse;: This will be the same as column but the items will be laid from bottom to top.

We will see an instance of this using the following ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required