Tags: flexbox

30

sparkline

CSS Grid, Flexbox And Box Alignment: Our New System For Web Layout – Smashing Magazine

Rachel provides an in-depth comparison between flexbox and grid layout: what they have in common, and what their respective strengths are.

Don’t forget to enable the experiment web features flag in your browser if you want to see the examples in action.

Flex-grow 9999 Hack

This is an unintuitive—but very handy—use of of the flex-grow property. The use-case outlined here is fairly common.

Part 3: We might not need quantity queries thanks to Flexbox | Charlotte Jackson, Front-end developer

I love the way that Charlotte is documenting her learning process. In this third part of the quantity queries + flexbox saga, it turns out that flexbox is capable of doing the magic all by itself!

Quantity queries and Flexbox part 2 | Charlotte Jackson, Front-end developer

This is so great! Charlotte takes two previous ideas she’s been writing about (quantity queries and flexbox) and puts them together in a new way.

It took me a while to get around what the nth-child selectors are doing here, but Charlotte does such great job of explaining the CSS that even I could understand it.

Heydon/fukol-grids

The most minimal responsive, flexible grid library you can find. In fact, here’s the whole thing:

.fukol-grid {
  display: flex; /* 1 */
  flex-wrap: wrap; /* 2 */
  margin: -0.5em; /* 5 (edit me!) */
}

.fukol-grid > * {
  flex: 1 0 5em; /* 3 (edit me!) */
  margin: 0.5em; /* 4 (edit me!) */
}

Horizontal lines around centered content

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

Intro to Flexbox

The slides from Arelia’s flexbox talk.

Flex Layout Attribute (FLA)

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.