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 Patterns
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.
Bulma
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.
Sticky Footer
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.
Responsive Tables
A complex example with lots of different kinds of fields, and a very custom wrapping logic.
Masonry layout
Instead of using JS to power your masonry grids, why not flexbox?
Hero Flex-list
Some responsive hero image style cards arranged using flexbox.
Flexbox Madness
A tournament style bracket with flexbox and fallbacks.
Pricing Plan
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.
Navigation menus
A simple demonstration of three very common ways of arranging and sizing menu items, all achieved with the help of CSS flexbox.
Slider
Little slider built with flexbox. Somewhat responsive, and can have fixed elements alongside the slider area.
Pure CSS Radios with Flexbox
Pagination
I’m a responsive page link menu built with Flexbox!
Tabs
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.
Dribble Card
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.
Alphabet Navigation
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.
