Imagine something like these Transformer Tabs as a widget in a fluid column in a responsive design. Depending on the browser window width, perhaps this design is either 4, 2, or 1 column wide. When it breaks from 4 to 2, the column probably temporarily gets wider than it was, even though the screen is narrower. It would be preferable when writing the media query logic for those tabs to consider how much space the widget has available rather than the entire window, which might be totally unrelated, especially when re-using this widget.

Jonathan Neal has some thoughts on how this might work, including the complicated bits you might not have thought about, like how a widgets contents might affect its parent container and cause an infinite loop.

Direct Link to Article — Permalink

Thoughts on Media Queries for Elements is a post from CSS-Tricks

Someone wrote in to me asking how to create a simple bar navigation with icons. This is a pretty simple layout thing that could be accomplished loads of different ways. List items as inline-block probably makes the most sense in general.

But I've been enjoying tinkering with flexbox, so I decided to toss it together with that, and it made for a pretty educational example I think.

Here it is:

See the Pen Bar Navigation with Flexbox and SVG icons by Chris Coyier (@chriscoyier) on CodePen.

Flexbox makes it easy to align the items however you want:

Flexbox makes it easy to allow the menu items to take up as much space as they need, without specifying any exact numbers:

But if you want to apply exact numbers, you can:

Flex items can wrap and the properties can change with media queries:

Flex items are easy to align how you want, even vertically, even with centering:

In the demo, feel free to turn on the outlines to see how the boxes align themselves.

I realize not everyone can use flexbox on everything they work on. Yadda yadda browser support, clients, etc. Some people can, on some projects. After playing with it for stuff like this, I think it becomes clear how important it is going to become.

Flexbox Bar Navigation Demo is a post from CSS-Tricks