dk_flexbox and dk_flex_item

Creating theme-compatible flex-based layouts with Doorkeeper CSS.

428 views

Edited: 2020-09-27 08:10

The dk_flexbox class will apply display:flex; to an element, while dk_flex_item should be used on the first-level children of the element.

Example:

<div class="dk_flexbox">
  <div class="dk_flex_item">Item 1</div>
  <div class="dk_flex_item">Item 2</div>
</div>

They may also be used on HTML lists to create an accessible navigation menu:

<ul class="dk_flexbox">
  <li class="dk_flex_item">Item 1</li>
  <li class="dk_flex_item">Item 2</li>
</ul>

Flex is very easy and flexible, and can be used for many different things; the advantage of using it is that layouts almost automatically becomes mobile-friendly.