Layout: Sidebar

The sidebar layout creates a container, inside of which a larger panel can sit next to a smaller (sidebar) panel.

The two panels stack vertically, until there is enough horizontal space for them to sit alongside each other. The point at which this change happens is determined by setting a flex-basis on the sidebar panel and a min-width on the larger panel. No viewport media queries required, so it will nest nicely inside of other containers.

Larger content panel

Notice that there is no spacing between the content and its container. If we were to use padding to achieve this, it would cause the flexbox layout to break.

Smaller sidebar panel

Notice that there is no spacing between the content and its container. If we were to use padding to achieve this, it would cause the flexbox layout to break.

Box layout

This allows us to space the sidebar content away from the container edges.

Box layout

This allows us to space the sidebar content away from the container edges.

Larger content panel

Something looks different here.

Smaller sidebar panel

Thanks to Flexbox, we can use the order property to specify whether the sidebar should sit visually on the left or the right without having to adjust the source order.