layout · ratatui's constraint explorer on intuiTUIve
Screenshots
Explorer │ Sizes │ Flex │ Beyond Blocks: Fixed 16 Percent 20% Ratio 1/4 Max 12 gap 1 ←/→ pick · 1-6 fixed, percent, ratio, flex, min, max · ↑/↓ size · a add · x remove · +/- gap Start ┌ Fixed 16 ────┐ ┌ Percent 20% ────┐ ┌ Ratio 1/4 ───────────┐ ┌ Max 12 ──┐ │▒▒▒▒▒▒▒▒▒▒▒▒▒▒│·│ │·│ │·│ │·························· └ 16 ──────────┘ └ 19 ─────────────┘ └ 24 ──────────────────┘ └ 12 ──────┘ Center ┌ Fixed 16 ────┐ ┌ Percent 20% ────┐ ┌ Ratio 1/4 ───────────┐ ┌ Max 12 ──┐ ·············│▒▒▒▒▒▒▒▒▒▒▒▒▒▒│·│ │·│ │·│ │············· └ 16 ──────────┘ └ 19 ─────────────┘ └ 24 ──────────────────┘ └ 12 ──────┘ End ┌ Fixed 16 ────┐ ┌ Percent 20% ────┐ ┌ Ratio 1/4 ───────────┐ ┌ Max 12 ──┐ ··························│▒▒▒▒▒▒▒▒▒▒▒▒▒▒│·│ │·│ │·│ │ └ 16 ──────────┘ └ 19 ─────────────┘ └ 24 ──────────────────┘ └ 12 ──────┘ SpaceBetween ┌ Fixed 16 ────┐ ┌ Percent 20% ────┐ ┌ Ratio 1/4 ───────────┐ ┌ Max 12 ──┐ │▒▒▒▒▒▒▒▒▒▒▒▒▒▒│·········│ │··········│ │··········│ │ └ 16 ──────────┘ └ 19 ─────────────┘ └ 24 ──────────────────┘ └ 12 ──────┘ SpaceAround ┌ Fixed 16 ────┐ ┌ Percent 20% ────┐ ┌ Ratio 1/4 ───────────┐ ┌ Max 12 ──┐ ···│▒▒▒▒▒▒▒▒▒▒▒▒▒▒│·······│ │········│ │·······│ │···· └ 16 ──────────┘ └ 19 ─────────────┘ └ 24 ──────────────────┘ └ 12 ──────┘ SpaceEvenly ┌ Fixed 16 ────┐ ┌ Percent 20% ────┐ ┌ Ratio 1/4 ───────────┐ ┌ Max 12 ──┐ ·····│▒▒▒▒▒▒▒▒▒▒▒▒▒▒│······│ │······│ │······│ │······ └ 16 ──────────┘ └ 19 ─────────────┘ └ 24 ──────────────────┘ └ 12 ──────┘ Tab/Shift+Tab tabs · ? keys · Ctrl+P commands · q quit
Explorer │ Sizes │ Flex │ Beyond Blocks: Fixed 16 Percent 30% Ratio 1/4 Max 12 gap 3 ←/→ pick · 1-6 fixed, percent, ratio, flex, min, max · ↑/↓ size · a add · x remove · +/- gap Start ┌ Fixed 16 ────┐ ┌ Percent 30% ────────────┐ ┌ Ratio 1/4 ─────────┐ ┌ Max 12 ──┐ │ │···│▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒│···│ │···│ │·············· └ 16 ──────────┘ └ 27 ─────────────────────┘ └ 22 ────────────────┘ └ 12 ──────┘ Center ┌ Fixed 16 ────┐ ┌ Percent 30% ────────────┐ ┌ Ratio 1/4 ─────────┐ ┌ Max 12 ──┐ ·······│ │···│▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒│···│ │···│ │······· └ 16 ──────────┘ └ 27 ─────────────────────┘ └ 22 ────────────────┘ └ 12 ──────┘ End ┌ Fixed 16 ────┐ ┌ Percent 30% ────────────┐ ┌ Ratio 1/4 ─────────┐ ┌ Max 12 ──┐ ··············│ │···│▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒│···│ │···│ │ └ 16 ──────────┘ └ 27 ─────────────────────┘ └ 22 ────────────────┘ └ 12 ──────┘ SpaceBetween ┌ Fixed 16 ────┐ ┌ Percent 30% ────────────┐ ┌ Ratio 1/4 ─────────┐ ┌ Max 12 ──┐ │ │·······│▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒│········│ │········│ │ └ 16 ──────────┘ └ 27 ─────────────────────┘ └ 22 ────────────────┘ └ 12 ──────┘ SpaceAround ┌ Fixed 16 ────┐ ┌ Percent 30% ────────────┐ ┌ Ratio 1/4 ─────────┐ ┌ Max 12 ──┐ ·│ │·······│▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒│······│ │·······│ │·· └ 16 ──────────┘ └ 27 ─────────────────────┘ └ 22 ────────────────┘ └ 12 ──────┘ SpaceEvenly ┌ Fixed 16 ────┐ ┌ Percent 30% ────────────┐ ┌ Ratio 1/4 ─────────┐ ┌ Max 12 ──┐ ··│ │······│▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒│······│ │······│ │··· └ 16 ──────────┘ └ 27 ─────────────────────┘ └ 22 ────────────────┘ └ 12 ──────┘ Tab/Shift+Tab tabs · ? keys · Ctrl+P commands · q quit
Explorer │ Sizes │ Flex │ Beyond Blocks: Fixed 16 Percent 30% Flex 1 Max 12 Fixed 10 gap 3 ←/→ pick · 1-6 fixed, percent, ratio, flex, min, max · ↑/↓ size · a add · x remove · +/- gap Start ┌ Fixed 16 ────┐ ┌ Percent 30% ───────────┐ ┌ Flex 1 ──────────────┐ ┌ Max 12 ──┐ ┌────────┐ │ │···│ │···│ │···│ │···│▒▒▒▒▒▒▒▒│ └ 16 ──────────┘ └ 26 ────────────────────┘ └ 24 ──────────────────┘ └ 12 ──────┘ └ 10 ────┘ Center ┌ Fixed 16 ────┐ ┌ Percent 30% ───────────┐ ┌ Flex 1 ──────────────┐ ┌ Max 12 ──┐ ┌────────┐ │ │···│ │···│ │···│ │···│▒▒▒▒▒▒▒▒│ └ 16 ──────────┘ └ 26 ────────────────────┘ └ 24 ──────────────────┘ └ 12 ──────┘ └ 10 ────┘ End ┌ Fixed 16 ────┐ ┌ Percent 30% ───────────┐ ┌ Flex 1 ──────────────┐ ┌ Max 12 ──┐ ┌────────┐ │ │···│ │···│ │···│ │···│▒▒▒▒▒▒▒▒│ └ 16 ──────────┘ └ 26 ────────────────────┘ └ 24 ──────────────────┘ └ 12 ──────┘ └ 10 ────┘ SpaceBetween ┌ Fixed 16 ────┐ ┌ Percent 30% ───────────┐ ┌ Flex 1 ──────────────┐ ┌ Max 12 ──┐ ┌────────┐ │ │···│ │···│ │···│ │···│▒▒▒▒▒▒▒▒│ └ 16 ──────────┘ └ 26 ────────────────────┘ └ 24 ──────────────────┘ └ 12 ──────┘ └ 10 ────┘ SpaceAround ┌ Fixed 16 ────┐ ┌ Percent 30% ───────────┐ ┌ Flex 1 ──────────────┐ ┌ Max 12 ──┐ ┌────────┐ │ │···│ │···│ │···│ │···│▒▒▒▒▒▒▒▒│ └ 16 ──────────┘ └ 26 ────────────────────┘ └ 24 ──────────────────┘ └ 12 ──────┘ └ 10 ────┘ SpaceEvenly ┌ Fixed 16 ────┐ ┌ Percent 30% ───────────┐ ┌ Flex 1 ──────────────┐ ┌ Max 12 ──┐ ┌────────┐ │ │···│ │···│ │···│ │···│▒▒▒▒▒▒▒▒│ └ 16 ──────────┘ └ 26 ────────────────────┘ └ 24 ──────────────────┘ └ 12 ──────┘ └ 10 ────┘ Tab/Shift+Tab tabs · ? keys · Ctrl+P commands · q quit
Explorer │ Sizes │ Flex │ Beyond Fixed │ Percent │ Ratio │ Flex │ Min │ Max ←/→ the kind · each block shows the width it got A quarter and three quarters ╭─ Ratio 1/4 ───────────╮╭─ Ratio 3/4 ─────────────────────────────────────────────────────────────╮ │ 25 wide ││ 75 wide │ ╰───────────────────────╯╰─────────────────────────────────────────────────────────────────────────╯ Four quarters fill the row exactly ╭─ Ratio 1/4 ───────────╮╭─ Ratio 1/4 ───────────╮╭─ Ratio 1/4 ───────────╮╭─ Ratio 1/4 ───────────╮ │ 25 wide ││ 25 wide ││ 25 wide ││ 25 wide │ ╰───────────────────────╯╰───────────────────────╯╰───────────────────────╯╰───────────────────────╯ Half, and flex for the rest ╭─ Ratio 2/4 ────────────────────────────────────╮╭─ Flex 1 ───────────────────────────────────────╮ │ 50 wide ││ 50 wide │ ╰────────────────────────────────────────────────╯╰────────────────────────────────────────────────╯ Tab/Shift+Tab tabs · ? keys · Ctrl+P commands · q quit
Explorer │ Sizes │ Flex │ Beyond Fixed │ Percent │ Ratio │ Flex │ Min │ Max ←/→ the kind · each block shows the width it got At most 20, the rest flex ╭─ Max 20 ─────────╮╭─ Flex 1 ─────────────────────────────────────────────────────────────────────╮ │ 20 wide ││ 80 wide │ ╰──────────────────╯╰──────────────────────────────────────────────────────────────────────────────╯ Two maximums leave room over ╭─ Max 20 ─────────╮╭─ Max 30 ───────────────────╮ │ 20 wide ││ 30 wide │ ╰──────────────────╯╰────────────────────────────╯ A maximum beside a fixed block ╭─ Max… ─╮╭─ Fixed 30 ─────────────────╮ │10 wide ││ 30 wide │ ╰────────╯╰────────────────────────────╯ Tab/Shift+Tab tabs · ? keys · Ctrl+P commands · q quit
Explorer │ Sizes │ Flex │ Beyond Start, gap 0 ┃ ╭─ Fixed 20 ───────╮╭─ Percent 20% ───╮╭─ Fix… ─╮ ┃ │ 20 wide ││ 19 wide ││10 wide │ ┃ ╰──────────────────╯╰─────────────────╯╰────────╯ ┃ Center, gap 0 ┃ ╭─ Fixed 20 ───────╮╭─ Percent 20% ───╮╭─ Fix… ─╮ ┃ │ 20 wide ││ 19 wide ││10 wide │ ┃ ╰──────────────────╯╰─────────────────╯╰────────╯ ┃ End, gap 0 ┃ ╭─ Fixed 20 ───────╮╭─ Percent 20% ───╮╭─ Fix… ─╮┃ │ 20 wide ││ 19 wide ││10 wide │┃ ╰──────────────────╯╰─────────────────╯╰────────╯┃ SpaceBetween, gap 0 ┃ ╭─ Fixed 20 ───────╮ ╭─ Percent 20% ───╮ ╭─ Fix… ─╮┃ │ 20 wide │ │ 19 wide │ │10 wide │┃ ╰──────────────────╯ ╰─────────────────╯ ╰────────╯┃ SpaceAround, gap 0 │ ╭─ Fixed 20 ───────╮ ╭─ Percent 20% ───╮ ╭─ Fix… ─╮ │ │ 20 wide │ │ 19 wide │ │10 wide │ │ ╰──────────────────╯ ╰─────────────────╯ ╰────────╯ │ SpaceEvenly, gap 0 │ ╭─ Fixed 20 ───────╮ ╭─ Percent 20% ───╮ ╭─ Fix… ─╮ │ │ 20 wide │ │ 19 wide │ │10 wide │ │ ╰──────────────────╯ ╰─────────────────╯ ╰────────╯ │ Start, gap 2 │ ╭─ Fixed 20 ───────╮ ╭─ Percent 20% ───╮ ╭─ Fix… ─╮ │ │ 20 wide │ │ 19 wide │ │10 wide │ │ ╰──────────────────╯ ╰─────────────────╯ ╰────────╯ │ Tab/Shift+Tab tabs · ? keys · Ctrl+P commands · q quit
Explorer │ Sizes │ Flex │ Beyond What ratatui's layout has no counterpart for. The `align` example changes each of these with a key. align_items(Start) align_items(Center) align_items(End) align_items(Stretch) ╭─ a ─╮ ╭─ b ─╮ ╭─ c ─╮ ╭─ b ─╮ ╭─ c ─╮ ╭─ b ─╮ ╭─ a ─╮ ╭─ b ─╮ ╭─ c ─╮ │· │ │· │ │· │ ╭─ a ─╮ │· │ │· │ │· │ ╭─ c ─╮ │· │ │· │ │· │ ╰─────╯ │· │ │· │ │· │ │· │ │· │ ╭─ a ─╮ │· │ │· │ │ │ │· │ │· │ │· │ ╰─────╯ ╰─────╯ │· │ ╰─────╯ │· │ │· │ │· │ │ │ │· │ │ │ ╰─────╯ ╰─────╯ ╰─────╯ ╰─────╯ ╰─────╯ ╰─────╯ ╰─────╯ ╰─────╯ wrap(): cards that do not fit go on the next line ╭─ card 1 ───────╮ ╭─ card 2 ───────────╮ ╭─ card 3 ───╮ ╭─ card 4 ───────╮ ╭─ card 5 ───────────╮ │· │ │· │ │· │ │· │ │· │ ╰────────────────╯ ╰────────────────────╯ ╰────────────╯ ╰────────────────╯ ╰────────────────────╯ ╭─ card 6 ───╮ ╭─ card 7 ───────╮ ╭─ card 8 ───────────╮ ╭─ card 9 ───╮ │· │ │· │ │· │ │· │ ╰────────────╯ ╰────────────────╯ ╰────────────────────╯ ╰────────────╯ Tab/Shift+Tab tabs · ? keys · Ctrl+P commands · q quit