The flank is what Every Layout calls the sidebar, but I didn't want it to be confused with sidebars used in an application. Thus, the name changed, but the idea is still there. It creates an in-page two-column split where a fixed-width secondary column flanks a flexible main column. It wraps to a stacked single column when there is no room for both side by side.
Examples
Main content area that grows to fill the remaining space.
<div class="flank" style="--flank-width: 12rem">
<aside class="docs-box">Secondary</aside>
<div class="docs-box">Main content area that grows to fill the remaining space.</div>
</div>
Reversed
When reversed, the secondary column is on the right.
Main content
<div class="flank is-reversed" style="--flank-width: 12rem">
<div class="docs-box">Main content</div>
<aside class="docs-box">Secondary</aside>
</div>
Reference
Source: src/css/composition.css
Applies to
.flank
Classes
| Class | Kind | Description |
|---|---|---|
.is-reversed | variant | Reverses the secondary and main columns, expecting the smaller column on the right |
Slots
| Slot | Description |
|---|---|
.flank > :first-child | The secondary (smaller) column |
.flank > :last-child | The main (larger) column |
Tokens
| Token | Default | Description |
|---|---|---|
--flank-gap | var(--space-lg) | Gap between the secondary and main columns |
--flank-width | 20rem | Flex basis for the secondary column |
--flank-content-min | 50% | Minimum width before wrapping to single column |