Adactio: Links

Horizontal lines around centered content

Here’s another clever CSS technique. It uses flexbox to add horizontal lines either side of centred content.

The markup here (with proprietary inline attributes for styling) is a terrible idea but the demo that accompanies is great at showing how flexbox works …I just wish it didn’t try to abstract away the CSS. This is so close to being a really good learning tool for flexbox.

Flexbox Patterns

Here’s a well put-together collection of common patterns that are now much easier thanks to flexbox.

Should I use Grid or Flexbox?

Rachel compares two CSS layout modules; Grid and Flexbox. This distinction is crucial:

Flexbox is essentially for laying out items in a single dimension – in a row OR a column. Grid is for layout of items in two dimensions – rows AND columns.

CSS Flexbox Is Entirely Logical (Almost) / Paul Robert Lloyd

Paul is digging deep into flexbox and finding it particularly useful for internationalisation …but there are still some gotchas.

Flexbox Defense

If Flexbox Froggy was too easy for you, take it to the next level with this tower defence game.

Vanishing boxes with display contents

I’ve seen the exact problem that Rachel describes here—flexbox only applied to direct children, meaning the markup would have to be adjusted. display: contents looks like a nifty solution.

IonicaBizau/gridly

Grid frameworks don’t get much more minimal than this—eleven lines of CSS:

.row { display: flex; }
.col { flex: 1; }
@media (max-width: 48em) {
    .row { flex-direction: column; }
    .col { flex: 0 0 100%; }
}
.col-tenth { flex: 0 0 10%; }
.col-fifth { flex: 0 0 20%; }
.col-quarter { flex: 0 0 25%; }
.col-third { flex: 0 0 33.3333334%; }
.col-half { flex: 0 0 50%; }

Should’ve been a gist really.

Putting My Patterns through Their Paces ◆ 24 ways

Ethan demonstrates progressive enhancement at the pattern level using flexbox.

I’ve found that thinking about my design as existing in broad experience tiers – in layers – is one of the best ways of designing for the modern web.

philipwalton/flexbugs

A list of known bugs (and workarounds) in flexbox implementations. This is going to be handy to refer back to.

Flexbox Grid Finesse | HeydonWorks

Great tips from Heydon on building a real design system using flexbox. Perfect for those times when you can’t predict the amount of content that will be in layout …so, pretty much always.

There’s even a trick in here that kinda sorta gives us element queries.

Flexbox’s Best-Kept Secret

I’m filing this one away for future reference: combining flexbox with margin:auto is a magical combination.

Using auto margins with Flexbox is an effective way to get all of the flexibility of css floats, without the nastiness of breaking elements out of the document’s normal flow.

Remember this, future self!

Flexbox Froggy - A game for learning CSS flexbox

This is superb!

Flexbox can be tricky to get your head around, but this exercise does a great job of walking you through each step in a fun way. I highly recommend trying all 24 levels.

A Practical Guide to Flexbox: Don’t Forget about flex-shrink by Noah Blon on CodePen

A deceptively simple but powerful use of flexbox.

With a spoonful of flexbox by Charlotte Jackson, Front-end developer

Charlotte has experimenting with a nice discrete bit of flexbox on her personal site. Here she documents what she did, and what the fallback is.

Playing With Flexbox and Quantity Queries, From the Notebook of Aaron Gustafson

Aaron documents his process of implementing Heydon’s clever quantity queries in CSS.

I am really looking forward to hearing Heydon’s talk at Responsive Day Out.

Experiment: Using Flexbox Today - Chris Wright

Practical examples showing where you can use flexbox right now, along with some strategies on how to start doing it.

Harnessing Flexbox For Today’s Web Apps - Smashing Magazine

More flexbox!

This time it’s a great article by Karen Menezes filled with practical examples showing where you can use flexbox today.

flexbox in 5 minutes

A really handy interactive intro to flexbox. Playing around with the properties and immediately seeing the result is a real help.

Solved By Flexbox — Cleaner, hack-free CSS

Documenting common layout issues that can be solved with Flexbox. I like the fact that some of these can be used as enhancements e.g. sticky footer, input add-ons …the fallback in older browsers is perfectly acceptable.

Full-width pinned layouts with flexbox

Zoe uses one little case study to contrast two different CSS techniques: display-table and flexbox. Flexbox definitely comes out on top when it comes to true source-order independence.

Flexbox for forms - German for black

Here’s a clever use of flexbox: have a form field stretch to fill up most of the space and a button fill up what’s left.

Jordan Moore | Building With Content Choreography

Using flexbox to creata a narrow-column stacking order that’s unrelated to the source order.

Learn You a Flexbox for Great Good! | The Haystack.

Stephen gives an excellent run-down of flexbox and how you can use it today.

Tags: flexbox

25