Every arrangement the Flux layout grid supports, in Persian right-to-left and English left-to-right. The element that directly wraps flux:main becomes a 3×3 grid with the areas header / sidebar / main / aside / footer; the order of the children is what picks the arrangement.
Navigation at the top of the page and no sidebar; good for public storefront pages.
The sidebar comes before the header, so it takes the full page height and the header sits beside it.
The same parts in the opposite order: the header comes first and takes the full page width.
On desktop the sidebar collapses to an icon rail and stays open on hover.
Fixed on desktop, off-canvas with a blurred backdrop on mobile — the standard dashboard arrangement.
Three columns: a navigation sidebar, the main content and a sticky aside for the order summary.
The header, sidebar and aside are all sticky and only the main content scrolls.
Full-width sections compared side by side with <flux:container> and the "container" prop.
The grid areas come from flux.css itself and swap with the order of the elements: put flux:sidebar before flux:header and the sidebar takes the full height; put the header first and it takes the full width. In RTL the sidebar lands on the right on its own, because Flux uses logical properties (start / end).
grid-template-areas:
"header header header"
"sidebar main aside"
"sidebar footer aside";
/* sidebar before header: */
"sidebar header header"
"sidebar main aside"
"sidebar footer aside";