Flexbox enables you to create complex layouts with only a few lines of code — no more floats and “clearfix” hacks. Flexbox elements can have pixel widths, percentages, ems, vws, fixed and flexible widths combined. According to CanIUse, Flexbox are generally supported by the modern browsers that we can safely use Flexbox now. So in this post we`ve gathered some awesome examples of UI components built using CSS flexbox that will help you solving some user interface problems.
Flexbox is awesome, but it introduces many new concepts that can make it difficult to use. These interactive examples will show you practical ways to use it to build UI components. They start out simple and get more complex near the end.
A modern CSS framework based on Flexbox.
Smart-splitting window panes
If the window is wider than it is tall, it’ll split into columns. Otherwise, it’ll give you two rows.
This demo uses the flexible box model to ‘push’ the footer to the bottom. Simply make the body the ‘Flex Container’ and then add a flex-grow property to the main content area. No matter how little text is in the content area, the div expands to take up any leftover space.
A complex example with lots of different kinds of fields, and a very custom wrapping logic.
Instead of using JS to power your masonry grids, why not flexbox?
Some responsive hero image style cards arranged using flexbox.
A tournament style bracket with flexbox and fallbacks.
Using flexbox to display pricing plans with varying heights of content, with nice transitions, and mostly just using CSS. Very minimal JS for an optional piece of data. Also, using media queries to stack items when the boxes become too narrow.
A simple demonstration of three very common ways of arranging and sizing menu items, all achieved with the help of CSS flexbox.
Little slider built with flexbox. Somewhat responsive, and can have fixed elements alongside the slider area.
Pure CSS Radios with Flexbox
I’m a responsive page link menu built with Flexbox!
Responsive Flexbox Calendar w/ Retina Images
Uses flexbox to arrange calendar dates and HiDPI images (with w descriptor) for article images.
CSS Flexbox: Google Hangouts
Imitation of Google Hangouts chat log layout, using only CSS.
Pure CSS off-canvas menu with flexbox
Flexbox allows the content area to resize to fit the remaining space in the viewport when the menu becomes visible and takes up a chunk of the width.
One big take away here is a nice technique for vertical centering within a flexbox.
Flexy Product Cards
This pen was just a little play around using flexbox techniques, creating some super slick product cards with a swanky animation.
A navigation of this size can prove to be a challenging undertaking with floats and odd bits of inline-block positioning, and making it responsive would even further complicate things. With flexbox this undertaking involved no physical pain whatsoever.