flexbox

Grid to Flex

Una Kravets shows how to make layouts in CSS Grid with flexbox fallbacks for browsers that don’t support those grid properties just yet. Una writes:

CSS grid is AMAZING! However, if you need to support users of IE11 and below, or Edge 15 and below, grid won't really work as you expect...This site is a solution for you so you can start to progressively enhance without fear!

(more…)

A Quick Way to Remember the Difference Between `justify-content` and `align-items`

I was talking with a pal the other day and moaning about flexbox for the millionth time because I had momentarily forgotten the difference between the justify-content and align-items properties.

"How do I center an element horizontally with flex again?” I wondered. Well, that was when she gave me what I think is the best shorthand way of remembering how the two work together.

(more…)

Variable Order

A fascinating little tech demo by Roman Komarov that allows for clickable table sorting entirely in CSS. It's a combination of inline CSS custom properties, the order property, and calc().

This demo sparked a ton of conversation about accessibility, the crux of which is that the reordering is done only visually and not in the source. Which means that someone interacting directly with the source (a screen reader) might be mislead into thinking they've sorted the table when they haven't. Rachel Andrew pointed out that it's actually one of the rare things the spec itself tells you not to do:

Authors must use order only for visual, not logical, reordering of content. Style sheets that use order to perform logical reordering are non-conforming.

As a connoisseur of fine CSS trickery, I applaud the idea. In production, still a job for JavaScript. And about that order property? Is it always a bad idea to use? Amelia Bellamy-Royds has a post with a pretty good use case. And Adrian Roselli's HTML Source Order vs CSS Display Order covers the struggle.

New flexbox guides on MDN

MDN released a comprehensive guide to Flexbox with new and updated materials by Rachel Andrew. The guide includes 11 posts demonstrating layouts, use cases and everything you could possibly want or need to know on the topic. All of the related Flexbox properties are nicely and conveniently attached to the table of contents, making this extremely easy to use.

(more…)

Does CSS Grid Replace Flexbox?

No. Well. Mostly No.

Grid is much newer than Flexbox and has a bit less browser support. That's why it makes perfect sense if people are wondering if CSS grid is here to replace Flexbox.

To put a point on it:

  1. Grid can do things Flexbox can't do.
  2. Flexbox can do things Grid can't do.
  3. They can work together: a grid item can be a flexbox container. A flex item can be a grid container.

(more…)

Sticky Footer, Five Ways

A brief history, if you will.

The purpose of a sticky footer is that it "sticks" to the bottom of the browser window. But not always, if there is enough content on the page to push the footer lower, it still does that. But if the content on the page is short, a sticky footer will still hang to the bottom of the browser window.

(more…)

Should I use Grid or Flexbox?

Two sentences from Rachel Andrew that explain when to reach for which layout choice:

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.

Flexbox can wrap, making it sorta-kinda two dimensions, but it still flows in a single dimension.

`flex-grow` is weird. Or is it?

The following is a guest post by Manuel Matuzovic. It illustrates how flex-grow works, weird quirks and all. Then he goes into several examples on how common layout patterns may be implemented using flex-grow and flex-basis.

When I found out about flex-grow, I made a simple demo to find out what it did and how it worked.
I thought I got everything figured out, but when I tried it on a website a colleague has recently made, nothing worked as expected. No matter what we did, the layout didn't look and work like it did in my demo. That got me thinking and I started to doubt that I knew what flex-grow was all about.

(more…)

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag