Width control
Full-width sections compared side by side with <flux:container> and the "container" prop.
<body>
<flux:header container>…</flux:header>
<flux:main container>
<flux:container>…</flux:container>
</flux:main>
<flux:footer container>…</flux:footer>
</body>
header
main
footer
The colored band is full width but its contents are kept centered with flux:container.
Contained area
The prop on flux:header, flux:main and flux:footer; it centers the contents at max-w-7xl. This very page uses it.
Manual containment
For sections whose background runs full width but whose contents must stay centered — like the green band at the bottom of this page.
Full width
The default: the area only gets padding and stretches to the edges of the page — what the sidebar layouts use.
Orders today
128
Sales today
184,500,000
Toman
Returns
7
Average rating
Flash deals
Ends in:
07
hours
42
min
00
sec