20 Examples Of UI Components Built Using CSS Flexbox

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.

Flexbox Patterns

Bulma

A modern CSS framework based on Flexbox.

Bulma

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.

 Smart-splitting window panes

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.

Flexbox Sticky Footer

Responsive Tables

A complex example with lots of different kinds of fields, and a very custom wrapping logic.

 Really Responsive Tables using CSS Flexbox

Masonry layout

Instead of using JS to power your masonry grids, why not flexbox?

 Masonry layout with flebox

Hero Flex-list

Some responsive hero image style cards arranged using flexbox.

 Hero Flex-list

Flexbox Madness

A tournament style bracket with flexbox and fallbacks.

 Flexbox Madness

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.

 Flexbox Pricing Plan

Navigation menus

A simple demonstration of three very common ways of arranging and sizing menu items, all achieved with the help of CSS flexbox.

 Navigation menus using CSS flexbox

Slider

Little slider built with flexbox. Somewhat responsive, and can have fixed elements alongside the slider area.

 Flexbox slider

Pure CSS Radios with Flexbox

 Pure CSS Radios with Flexbox

Pagination

I’m a responsive page link menu built with Flexbox!

 Responsive Flexbox Pagination

Tabs

 Flexbox Tabs

Responsive Flexbox Calendar w/ Retina Images

Uses flexbox to arrange calendar dates and HiDPI images (with w descriptor) for article images.

 Responsive Flexbox Calendar w/ Retina Images

CSS Flexbox: Google Hangouts

Imitation of Google Hangouts chat log layout, using only CSS.

 CSS Flexbox: Google Hangouts

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.

 Pure CSS off-canvas menu with flexbox

Dribble Card

One big take away here is a nice technique for vertical centering within a flexbox.

 Dribble Card: Responsive 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.

 Flexy Product Cards

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.

 Alphabet Navigation - Flexbox Fridays 5

Leave a comment

Please be polite. We appreciate that. Your email address will not be published and required fields are marked

This site uses Akismet to reduce spam. Learn how your comment data is processed.