Skip to content
Theme UI
GitHub

Flexbox Sidebar

Create a sidebar layout with flexbox that automatically stacks when the container is narrow.

<div
sx={{
display: 'flex',
flexWrap: 'wrap',
}}>
<aside
sx={{
flexGrow: 1,
flexBasis: 'sidebar',
}}>
Sidebar
</aside>
<main
sx={{
flexGrow: 99999,
flexBasis: 0,
minWidth: 320,
}}>
Main
</main>
</div>
// example theme
export default {
sizes: {
sidebar: 256,
},
}
/** @jsxImportSource theme-ui */
export default (props) => (
<div
sx={{
display: 'flex',
flexWrap: 'wrap',
}}>
<aside
sx={{
flexGrow: 1,
flexBasis: 'sidebar',
}}>
Sidebar
</aside>
<main
sx={{
flexGrow: 99999,
flexBasis: 0,
minWidth: 320,
}}>
{props.children}
</main>
</div>
)
Edit the page on GitHub
Previous:
Stack Layout
Next:
Button