Introduction of Orientation Variants

Getting Started

Orientation

Utilities to sets screen orientation with other utilities such as flex-direction. Find more about the usage Pseudo-Class Variants.

(portrait)flex-column

Portrait

@media (orientation: portrait){...}

(landscape)flex-row

Landscape

@media (orientation: landscape){...}

Set flex-direction to arrange containing items in a column when screen orientation set to portrait.

<!-- Example -->
<div class="flex (portrait)flex-column">
<div>...</div>
<div>...</div>
<div>...</div>
</div>

HTML

Set flex-direction to arrange containing items in a row when screen orientation set to landscape.

<!-- Example -->
<div class="flex (landscape)flex-row">
<div>...</div>
<div>...</div>
<div>...</div>
</div>

HTML