Tag Archives: flexbox

Vertical margins/paddings and Flexbox, a quirky combination

In CSS, percentage-based paddings are – as per spec – calculated with respect to the width of an element. However, for flex items (e.g. items whose parent have display: flex; applied) that’s not always the case. Depending on which browser … Continue reading

Elsewhere , , 2 Comments

justify-content: space-evenly; for Flexbox

A new alignment mode for Flex-containers is justify-content: space-evenly; The alignment subjects are distributed so that the spacing between any two adjacent alignment subjects, before the first alignment subject, and after the last alignment subject is the same. Currently supported … Continue reading

Elsewhere , , 2 Comments

The flex-grow: 9999; hack

Imagine a flex container (display: flex) with two flex items in a row (flex-direction: row). Item A on the left, and item B on the right. I would like the flex items to be stacked on top of each other … Continue reading

Elsewhere , , , Leave a comment

Simple Flexbox Grid System

… with blackjack, and hookers! (ref) Introduction and Requirements A while ago, I created a small and simple flexbox-based grid system for use in the projects we make at work. The developed Grid System inspired upon how Bootstrap works: it … Continue reading

Elsewhere , , , Leave a comment

Fukol™ Grids

Building a CSS Grid System isn’t that hard really, thanks to flexbox. Heydon has stripped it to its smallest form: .fukol-grid { display: flex; flex-wrap: wrap; margin: -0.5em; } .fukol-grid > * { flex: 1 0 10em; margin: 0.5em; } … Continue reading

Elsewhere , , , , Leave a comment

Flexbugs – Flexbox issues and cross-browser workarounds for them.

This repository is a community-curated list of flexbox issues and cross-browser workarounds for them. The goal is that if you’re building a website using flexbox and something isn’t working as you’d expect, you can find the solution here. Truth be … Continue reading

Elsewhere , , , 1 Comment

Quantity Ordering With CSS

Here is your mission, should you choose to accept it: create a table of items. Each item should span a third of the content area, with the fourth item starting on a new row, much like floats. However, a particular … Continue reading

Elsewhere , , , Leave a comment

Flexbox adventures

Up until reading Flexbox Adventures I hadn’t really given much thought to how flexbox grow exactly works. If you do want to know: Available space = (Container size – Flex-basis siblings total). Flex Item size = Basis + ((Available space … Continue reading

Elsewhere , , , Leave a comment

Flexbox Cheatsheet Cheatsheet

I set out to create a quick visual to summarize Flexbox when I run into these moments of pause in the future. I like to think of it as a little diagram (flow chart? decision tree-ish thing?) that is a … Continue reading

Elsewhere , , , Leave a comment

Dive into Flexbox

Flexbox is a new layout mode in CSS3 that is designed for the more sophisticated needs of the modern web. This article will describe the newly-stablized Flexbox syntax in technical detail. Great to see that after three years it has … Continue reading

Elsewhere , , , Leave a comment