Flex
Flexible layout container that arranges items using flexbox with configurable alignment, gaps, wrapping, and separators.
Refer this article to understand how css flex box works.
Location : layouts/_partials/layouts/flex.html
Parameters :
| Parameter | Type | Description | Default |
|---|---|---|---|
items | array | Array of HTML strings to display | required |
align | string | Vertical alignment: "center", "baseline", "flex-start", "flex-end" | "center" |
justify | string | Horizontal alignment: "flex-start", "center", "flex-end", "space-between", "space-around" | "flex-start" |
gap | string | Gap size: "xs", "sm", "md", "lg" | "md" |
wrap | boolean | Enable wrapping | false |
separator | string | Separator between items (e.g., " · ", " | ") | - |
class | string | Additional CSS classes | - |
Examples:
go
// Basic horizontal layout
{{ $items := slice $item1 $item2 $item3 }}
{{ partial "layouts/flex.html" (dict "items" $items) }}
// Centered with separator
{{ $metadata := slice
(partial "widgets/meta/author.html" (dict "page" . "site" .Site))
(partial "widgets/meta/date.html" (dict "page" . "site" .Site))
}}
{{ partial "layouts/flex.html" (dict
"items" $metadata
"separator" " · "
"justify" "center"
) }}
// Baseline aligned with custom gap
{{ $items := slice $title $subtitle }}
{{ partial "layouts/flex.html" (dict
"items" $items
"align" "baseline"
"gap" "sm"
) }}
// Space-between layout
{{ $items := slice $logo $menu }}
{{ partial "layouts/flex.html" (dict
"items" $items
"justify" "space-between"
) }}
// Wrapping layout
{{ $tags := slice $tag1 $tag2 $tag3 $tag4 }}
{{ partial "layouts/flex.html" (dict
"items" $tags
"wrap" true
"gap" "sm"
) }}