Make toolbar buttons stack vertically within the sidebar:
.toolbar {
display: flex;
flex-direction: column;
width: 60px;
align-items: center;
gap: 4px;
padding: 8px 4px;
}
.app-container {
display: flex;
height: 100vh;
}
.toolbar {
width: 60px;
flex-shrink: 0; /* Never shrink below 60px */
}
.canvas-area {
flex: 1; /* Take ALL remaining space */
}
.settings-panel {
width: 280px;
flex-shrink: 0; /* Never shrink below 280px */
}
Center the canvas element within its container and space out settings controls:
.canvas-area {
flex: 1;
display: flex; /* Nested flex! */
justify-content: center; /* Horizontal center */
align-items: center; /* Vertical center */
background-color: #0a0a1a;
overflow: hidden;
}
Open DevTools → Elements → click the flex badge next to any flex container. This activates the Flexbox overlay — colored lines showing direction, gaps, and item sizes.
Experiment with every justify-content value and see what they do:
| Value | Behavior |
|---|---|
| flex-start | Pack items at the start |
| flex-end | Pack items at the end |
| center | Pack items in the center |
| space-between | Equal space between items, none at edges |
| space-around | Equal space around each item |
| space-evenly | Equal space everywhere |
Change values in DevTools and watch the layout shift in real time.
Introduce CSS Grid briefly for the settings panel layout — each filter control needs three columns:
.filter-group {
display: grid;
grid-template-columns: 80px 1fr 40px;
align-items: center;
gap: 8px;
}
| Column | Size | Content |
|---|---|---|
| 1 | 80px (fixed) | Label text |
| 2 | 1fr (fill remaining) | Range slider |
| 3 | 40px (fixed) | Current value |
git switch -c design/PIXELCRAFT-004-fix-layout
git add src/styles/main.css src/index.html
git commit -m "Implement three-panel Flexbox layout (PIXELCRAFT-004)"
git push origin design/PIXELCRAFT-004-fix-layout
# PR → Review → Merge → Close ticket ✅
Layout is constraint satisfaction.
"This must be 60px wide. That must fill remaining space. These must be vertically centered." The browser's layout engine solves a system of constraints every time it renders a frame.