cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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, but...

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...