css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.

Posts tagged flex

Evenly Spacing Elements with text-align: justify

A nice little trick for those parts of your page that need even spacing between blocks but for some reason you don't want to or can't use flexbox. Maybe it comes down to your project's...

Flexbox Grid with SCSS Mixins

There are plenty of great articles about there about using Flexbox for gridding up your web pages. I have been a progressive enhancement disciple and have been using display: flex for a number of...

Bosma.org Pattern Library

*Note: Because of the number of iframes on the page, sometimes images don't load correctly. Simply hover over the frame and click "rerun."*

Basic Elements



Simmons.com Pattern Library

Basic Elements


Simmons.com - Colors


Typography Kits

[[[pen slug-hash='2a4255ef59491e7b06fd40bb33746dc3'...

Flex Props


Set up direction of main axis:

flex-direction: row | row-reverse | column | column-reverse;

Set up wrap:

flex-wrap: nowrap | wrap | wrap-reverse;

Justify by main axis:


Marquee Tags and Flex

What happens if for some reason, you feel the need to use a marquee tag, but also want to use flex box on it?

Short answers:

Chrome: Nothing.

Firefox: Nothing.

Edge: Surprisingly, it's choppy,...

Avoiding chaos when using Flexbox 'order'

A recent Twitter flurry provoked me to finally build a Flexbox demo I've been meaning to create since I first started playing around with CSS flex properties.

Roma Komarov posted an exploration...

CSS Flex: Smooth Wrapping - Success! (No dep libs!)

CSS Flex wrapping, by default, snaps elements from row to row, or from column to column.

Adding CSS transitions directly to flex-wrap: wrap;ed elements have no effect.

Some alternative approaches:


Practicing Flex

Flexbox Practice

Made for practicing Flexbox. Nothing beats hands-on practice


#1 Flexbox Practice - Display

#2 Flexbox Practice - Flex Direction

#3 Flexbox Practice - Flex Wrap