Skip to content

60+ Best Responsive CSS Flexbox Examples and Demos

    See the Pen Positioning HTML elements with CSS Flexbox by Torben Colding (@torbencolding) on CodePen.

    Title:- Positioning HTML elements with CSS Flexbox
    Author:- Torben Colding
    Made With:- HTML CSS JAVASCRIPT


    See the Pen Flexbox by MSEdgeDev (@MSEdgeDev) on CodePen.

    This sample uses the flexible box layout (“Flexbox“) to create a simple website layout with a header, navigation, body, aside, and a footer.

    Title:- Flexbox
    Author:- MSEdgeDev
    Made With:- HTML CSS JAVASCRIPT


    See the Pen Masonry/Pinterest-style Grid with Flexbox by Jessica (@kattixie) on CodePen.

    Title:- Masonry/Pinterest-style Grid with Flexbox
    Author:- Jessica
    Made With:- HTML CSS JAVASCRIPT


    See the Pen flexbox nav by alex baldwin (@cubeghost) on CodePen.

    Title:- flexbox nav
    Author:- alex baldwin
    Made With:- HTML CSS JAVASCRIPT

    See the Pen Flexbox Experiment 1.0 by Kristina Powell (@CitrusCurse) on CodePen.

    Title:- Flexbox Experiment 1.0
    Author:- Kristina Powell
    Made With:- HTML CSS JAVASCRIPT

    See the Pen Responsive grid with captions using flexbox by SitePoint (@SitePoint) on CodePen.

    Title:- Responsive grid with captions using flexbox
    Author:- SitePoint
    Made With:- HTML CSS JAVASCRIPT

    See the Pen Travel Gallery (Flexbox and CSS Animations/Transitions) by Sean Free (@seanfree) on CodePen.

    Title:- Travel Gallery (Flexbox and CSS Animations/Transitions)
    Author:- Sean Free
    Made With:- HTML CSS JAVASCRIPT

    See the Pen Angular + FlexBox by ebeal (@ebeal) on CodePen.

    Title:- Angular + FlexBox
    Author:- ebeal
    Made With:- HTML CSS JAVASCRIPT

    See the Pen Responsive Flexbox Calendar w/ Retina Images by Dudley Storey (@dudleystorey) on CodePen.

    Title:- Responsive Flexbox Calendar w/ Retina Images
    Author:- Dudley Storey
    Made With:- HTML CSS JAVASCRIPT

    See the Pen Flexbox Article Layout by Jon Daiello (@jondaiello) on CodePen.

    gagan

    gagan

    Title:- Flexbox Article Layout
    Author:- Jon Daiello
    Made With:- HTML CSS JAVASCRIPT

    See the Pen Flexbox 2 columns by Mana (@manabox) on CodePen.

    Title:- Flexbox 2 columns
    Author:- Mana
    Made With:- HTML CSS JAVASCRIPT

    See the Pen Flexbox Overview by Michael Sitte (@michaelsitte) on CodePen.

    Title:- Flexbox Overview
    Author:- Michael Sitte
    Made With:- HTML CSS JAVASCRIPT

    See the Pen Commercial page – flexbox by LukyVJ (@LukyVj) on CodePen.

    Title:- Commercial page – flexbox
    Author:- LukyVJ
    Made With:- HTML CSS JAVASCRIPT

    See the Pen Flexbox Grids by Raphael Goetter (@raphaelgoetter) on CodePen.

    Title:- Flexbox Grids
    Author:- Raphael Goetter
    Made With:- HTML CSS JAVASCRIPT

    See the Pen Image Gallery Grid with Bootstrap 4 Flexbox by Yogini Bende (@ms_yogi) on CodePen.

    Title:- Image Gallery Grid with Bootstrap 4 Flexbox
    Author:- Yogini Bende
    Made With:- HTML CSS JAVASCRIPT

    See the Pen Flexbox layout patterns by keisuke Takahashi (@ksksoft) on CodePen.

    Title:- Flexbox layout patterns
    Author:- keisuke Takahashi
    Made With:- HTML CSS JAVASCRIPT

    See the Pen Simple and Responsive Grid Using Flexbox by Andrew Slaughter (@drewbots) on CodePen.

    Title:- Simple and Responsive Grid Using Flexbox
    Author:- Andrew Slaughter
    Made With:- HTML CSS JAVASCRIPT

    See the Pen Animate Flexbox Order by Blake Bowen (@osublake) on CodePen.

    Title:- Animate Flexbox Order
    Author:- Blake Bowen
    Made With:- HTML CSS JAVASCRIPT

    See the Pen Flexbox website layout/template (Pure CSS [jQuery for Nav movement]) by Josh Parrett (@JTParrett) on CodePen.

    Title:- Flexbox website layout/template (Pure CSS [jQuery for Nav movement])
    Author:- Josh Parrett
    Made With:- HTML CSS JAVASCRIPT

    See the Pen Responsive Flexbox Dashboard by ZingChart (@zingchart) on CodePen.

    Title:- Responsive Flexbox Dashboard
    Author:- ZingChart
    Made With:- HTML CSS JAVASCRIPT

    See the Pen Flex and Grid demo by rachelandrew (@rachelandrew) on CodePen.

    Title:- CodePen Home
    Author:- Flex and Grid demo
    Made With:- HTML CSS JAVASCRIPT

    See the Pen Flexible Tunnel with flexbox by Raphael Goetter (@raphaelgoetter) on CodePen.

    Title:- Flexible Tunnel with flexbox
    Author:- Raphael Goetter
    Made With:- HTML CSS JAVASCRIPT

    See the Pen Flexbox and Padding by Damon Seymour (@typogrammer) on CodePen.

    Title:- Flexbox and Padding
    Author:- Damon Seymour
    Made With:- HTML CSS JAVASCRIPT

    See the Pen Flexbox Accordion by Arjan Jassal (@arjancodes) on CodePen.

    Title:- Flexbox Accordion
    Author:- Arjan Jassal
    Made With:- HTML CSS JAVASCRIPT

    See the Pen Merging Flexbox Syntaxes by Chris Coyier (@chriscoyier) on CodePen.

    Title:- Merging Flexbox Syntaxes
    Author:- Chris Coyier
    Made With:- HTML CSS JAVASCRIPT

    See the Pen Flexbox responsive calendar by Gabi (@enxaneta) on CodePen.

    Title:- Flexbox responsive calendar
    Author:- Gabi
    Made With:- HTML CSS JAVASCRIPT

    See the Pen Responsive Flexbox Grid without media query breakpoints by Tim Holt (@astrotim) on CodePen.

    Title:- Responsive Flexbox Grid without media query breakpoints
    Author:- Tim Holt
    Made With:- HTML CSS JAVASCRIPT

    See the Pen Easy Flexbox Grid by Chris Coyier (@chriscoyier) on CodePen.

    Title:- Easy Flexbox Grid
    Author:- Chris Coyier
    Made With:- HTML CSS JAVASCRIPT

    See the Pen 3d flexbox flippable card with shiny! by Adam Crockett (@acronamy) on CodePen.

    Title:- 3d flexbox flippable card with shiny!
    Author:- Adam Crockett
    Made With:- HTML CSS JAVASCRIPT

    See the Pen Flexbox grid layout w/ Mobile Menu by Lindsey (@cssgirl) on CodePen.

    Title:- Flexbox grid layout w/ Mobile Menu
    Author:- Lindsey
    Made With:- HTML CSS JAVASCRIPT

    See the Pen Combining flexbox and floats by David Hucklesby (@hucklesby) on CodePen.

    Title:- Combining flexbox and floats
    Author:- David Hucklesby
    Made With:- HTML CSS JAVASCRIPT

    See the Pen Flexbox inner border and column alignment by Kristian Dalgård (@dalgard) on CodePen.

    Title:- Flexbox inner border and column alignment
    Author:- Kristian Dalgård
    Made With:- HTML CSS JAVASCRIPT

    See the Pen Flexbox Responsive Form by Adam Argyle (@argyleink) on CodePen.

    Title:- Flexbox Responsive Form
    Author:- Adam Argyle
    Made With:- HTML CSS JAVASCRIPT

    See the Pen template : flexbox by Raphael Goetter (@raphaelgoetter) on CodePen.

    Title:- template : flexbox
    Author:- Raphael Goetter
    Made With:- HTML CSS JAVASCRIPT

    See the Pen Flexbox grid with gap by Veiko (@vkjgr) on CodePen.

    Title:- Flexbox grid with gap
    Author:- Veiko
    Made With:- HTML CSS JAVASCRIPT

    See the Pen FlexBox Exercise #4 – Same height cards by Veronica (@veronicadev) on CodePen.

    Title:- FlexBox Exercise #4 – Same height cards
    Author:- Veronica
    Made With:- HTML CSS JAVASCRIPT

    See the Pen Simple, flexible, and responsive flexbox-based modal by Bryan Chalker (@bchalker) on CodePen.

    Title:- Simple, flexible, and responsive flexbox-based modal
    Author:- Bryan Chalker
    Made With:- HTML CSS JAVASCRIPT

    See the Pen Bootstrap 4 Flexbox Grid by Joe Watkins (@joe-watkins) on CodePen.

    Title:- Bootstrap 4 Flexbox Grid
    Author:- Joe Watkins
    Made With:- HTML CSS JAVASCRIPT

    See the Pen Dashboard – Flexbox Fridays 7 by Lincoln Loop (@lincolnloop) on CodePen.

    Title:- Dashboard – Flexbox Fridays 7
    Author:- Lincoln Loop
    Made With:- HTML CSS JAVASCRIPT

    See the Pen Responsive Flexbox Grid by Guus Lieben (@guuslieben) on CodePen.

    Title:- Responsive Flexbox Grid
    Author:- Guus Lieben
    Made With:- HTML CSS JAVASCRIPT

    See the Pen Power of Flexbox, Calc, & Viewport Units by Alex Bass (@abass) on CodePen.

    Title:- Power of Flexbox, Calc, & Viewport Units
    Author:- Alex Bass
    Made With:- HTML CSS JAVASCRIPT

    See the Pen Responsive Flexbox Pagination by William H. (@iamjustaman) on CodePen.

    Title:- Responsive Flexbox Pagination
    Author:- William H.
    Made With:- HTML CSS JAVASCRIPT

    See the Pen Expanding Card Grid With Flexbox by Naila Ahmad (@nailaahmad) on CodePen.

    Title:- Expanding Card Grid With Flexbox
    Author:- Naila Ahmad
    Made With:- HTML CSS JAVASCRIPT

    See the Pen CSS3 accordion slider with Transitions and Flexbox by foxeisen (@foxeisen) on CodePen.

    Title:- CSS3 accordion slider with Transitions and Flexbox
    Author:- foxeisen
    Made With:- HTML CSS JAVASCRIPT

    See the Pen Flexbox Timeline Layout by Paul Barker (@paulhbarker) on CodePen.

    Title:- Flexbox Timeline Layout
    Author:- Paul Barker
    Made With:- HTML CSS JAVASCRIPT

    See the Pen Fullscreen Menu Flexbox Method by Marcus Hall (@flurrd) on CodePen.

    Title:- Fullscreen Menu Flexbox Method
    Author:- Marcus Hall
    Made With:- HTML CSS JAVASCRIPT

    See the Pen Responsive Flexbox Nav w/Checkbox Hack by Joe Watkins (@joe-watkins) on CodePen.

    Title:- Responsive Flexbox Nav w/Checkbox Hack
    Author:- Joe Watkins
    Made With:- HTML CSS JAVASCRIPT

    See the Pen Flexbox Calendar Example by Landon Schropp (@LandonSchropp) on CodePen.

    Title:- Flexbox Calendar Example
    Author:- Landon Schropp
    Made With:- HTML CSS JAVASCRIPT

    See the Pen SUPER BEST 🙀 FLEXBOX GRID 🌭 MIXIN EVR! 🔥 by Josh (@iamjoshellis) on CodePen.

    Title:- SUPER BEST ?? FLEXBOX GRID ?? MIXIN EVR! ??
    Author:- Josh
    Made With:- HTML CSS JAVASCRIPT

    See the Pen Flexbox 12-Column Grid Example by Landon Schropp (@LandonSchropp) on CodePen.

    Title:- CodePen Home
    Author:- Flexbox 12-Column Grid Example
    Made With:- HTML CSS JAVASCRIPT

    See the Pen COLORON GAME: inspiring developers to use SVG Animations, ES6 and Flexbox by Greg Hovanesyan (@gregh) on CodePen.

    Title:- COLORON GAME: inspiring developers to use SVG Animations, ES6 and Flexbox
    Author:- Greg Hovanesyan
    Made With:- HTML CSS JAVASCRIPT

    See the Pen Responsive Flexbox Tabs / Accordion – CSS Only by Josh Vogt (@josh_vogt) on CodePen.

    Title:- Responsive Flexbox Tabs / Accordion – CSS Only
    Author:- Josh Vogt
    Made With:- HTML CSS JAVASCRIPT

    See the Pen Flexbox: IE min-height fix by Chris Wright (@chriswrightdesign) on CodePen.

    Title:- Flexbox: IE min-height fix
    Author:- Chris Wright
    Made With:- HTML CSS JAVASCRIPT

    See the Pen Responsive Grid with Flexbox by Irina Kramer (@irinakramer) on CodePen.

    Title:- Responsive Grid with Flexbox
    Author:- Irina Kramer
    Made With:- HTML CSS JAVASCRIPT

    See the Pen Demo Flexbox 3 by Hugo “Kitty” Giraudel (@HugoGiraudel) on CodePen.

    Title:- Flexbox 3 Demo
    Author:- Hugo “Kitty” Giraudel
    Made With:- HTML CSS JAVASCRIPT

    See the Pen Flexbox Responsive Grid Playground by Marco Lago (@marcolago) on CodePen.

    Title:- Flexbox Responsive Grid Playground
    Author:- Marco Lago
    Made With:- HTML CSS JAVASCRIPT.

    See the Pen Flexbox Properties Demonstration by Dimitar (@justd) on CodePen.

    Title:- Flexbox Properties Demonstration
    Author:- Dimitar
    Made With:- HTML CSS JAVASCRIPT

    See the Pen Equal Height and Width Columns using Flexbox by Karen Menezes (@imohkay) on CodePen.

    Title:- Equal Height and Width Columns using Flexbox
    Author:- Karen Menezes
    Made With:- HTML CSS JAVASCRIPT

    See the Pen Creating a CSS Flexbox Grid by Brian Haferkamp (@brianhaferkamp) on CodePen.

    Title:- Creating a CSS Flexbox Grid
    Author:- Brian Haferkamp
    Made With:- HTML CSS JAVASCRIPT

    See the Pen css flexbox circle pack by Giacomo Randazzo (@RAN3000) on CodePen.

    Title:- css flexbox circle pack
    Author:- Giacomo Randazzo
    Made With:- HTML CSS JAVASCRIPT

    See the Pen CSS flexbox and grid justify-content: space-evenly by Sten Hougaard (@netsi1964) on CodePen.

    Title:- CSS flexbox and grid justify-content: space-evenly
    Author:- Sten Hougaard
    Made With:- HTML CSS JAVASCRIPT

    See the Pen Flex Layout Attribute — responsive/nested containers by Foliodot (@foliodot) on CodePen.

    Title:- Flex Layout Attribute — responsive/nested containers
    Author:- Foliodot
    Made With:- HTML CSS JAVASCRIPT

    See the Pen Flexbox Example: flex vs inline-flex by Claire (@clairecodes) on CodePen.

    Title:- Flexbox Example: flex vs inline-flex
    Author:- Claire
    Made With:- HTML CSS JAVASCRIPT

    See the Pen CSS Flexbox Source Order by Adrian Roselli (@aardrian) on CodePen.

    Title:- CSS Flexbox Source Order
    Author:- Adrian Roselli
    Made With:- HTML CSS JAVASCRIPT

    See the Pen CSS flexbox masonry, 3 columns by Tobias Ahlin (@tobiasahlin) on CodePen.

    Title:- CSS flexbox masonry, 3 columns
    Author:- Tobias Ahlin
    Made With:- HTML CSS JAVASCRIPT

    See the Pen 3-column CSS Flexbox layout by Torben Colding (@torbencolding) on CodePen.

    Title:- 3-column CSS Flexbox layout
    Author:- Torben Colding
    Made With:- HTML CSS JAVASCRIPT

    See the Pen CSS flexbox example by Tim Pietrusky (@TimPietrusky) on CodePen.

    Title:- CSS flexbox example
    Author:- Tim Pietrusky
    Made With:- HTML CSS JAVASCRIPT