Convenience Classes

Pre-defined CSS classes are available to style and layout content using CSS Flexbox directly within the Markdown editor.

TIP

For controlling content visibility based on dark mode or accessibility settings, see the Visibility Control guide.

Layout Containers

Apply these classes to a parent container (e.g., <div class="...">) to define the layout direction and behavior of its children.

Class	Description	Syntax Example
layout	Initializes a Flexbox container	<div class="layout">...</div>
horizontal	Sets flex direction to row (default)	<div class="layout horizontal">...</div>
vertical	Sets flex direction to column	<div class="layout vertical">...</div>
wrap	Allows items to wrap onto multiple lines	<div class="layout wrap">...</div>
no-wrap	Forces items to stay on a single line	<div class="layout no-wrap">...</div>
center-center	Centers content both horizontally and vertically	<div class="layout center-center">...</div>
center-justify	Centers content vertically and justifies it horizontally	<div class="layout center-justify">...</div>

Layout Factors (Sizing)

Apply these classes to the children inside a layout container to control how much space they consume relative to each other.

Class	Description	Syntax Example
flex	Sets flex factor to 1 (consumes available space)	<div class="flex">...</div>
flex-2	Sets flex factor to 2 (consumes 2x available space)	<div class="flex-2">...</div>
flex-3	Sets flex factor to 3	<div class="flex-3">...</div>
flex-4	Sets flex factor to 4	<div class="flex-4">...</div>

Example Usage

Creating a responsive two-column layout:

<div class="layout horizontal wrap">
  <div class="flex">
    Column 1 content...
  </div>
  <div class="flex-2">
    Column 2 content (twice as wide as Column 1)...
  </div>
</div>