Jan :rust: :ferris:
6 days ago

Understanding flex-grow, flex-shrink, and flex-basis

A great guide by @fonts, which has really helped me understand those #flexbox properties better.

It just solved a "hack" I've used previously in one of my flex containers, where the container shouldn't grow when content in it changed (hack: use position: absolute and another element within with position: relative).

Now, I just use:
flex: 0 0 <some-value> ✨

Thank you, Robin! ❤️

#WebDesign #WebDev #CSS #Layout #Flex

3 weeks ago

Irgendwann werde ich als #Flexbox-Prediger durch die Lande ziehen. Sie und CSS-Grids lösen einfach 99% aller Wehwehchen. 🤓 🤷‍♂️ #hallelujah #ADevsLife #CSS

2 months ago

Syntax Error's August issue comes out August 17th and will focus on #CSS.

Lucky for you, I'm better at debugging than graphic design.

I'll write about tips and tools that I use daily to debug my CSS.

Sign up now to get yours fresh from the print at

(PS. I'm really bad at marketing this newsletter so I appreciate all shares, boosts, toots and messages in bottles shared with colleagues and dev friends)

#debugging #debug #webdev #frontend #flexbox #CSSGrid #newsletter

Syntax Error logo surrounded by a red border. CSS Grid guidelines are visible, showing two distinct boxes with logo in the left one and test "CSS tips to your inbox" in the right one.
gemma lynn
2 months ago

got the wrong side of the bus schedule so i'm sitting at this stop thinking about how #flexbox is the best thing to happen to #css since ever and also how i'm basically using #bootstrap as a flex-and-margin convenience wrapper now

2 months ago

@zachleat This one by Josh W. Comeau:

It helped me understand how #flexbox works and that in turn enabled me to build way better stuff in the frontend.

erdrick :dumpster_fire:
2 months ago

Holy crap! I couldn't comprehend #CSS #flexbox and flexbox wrap until someone explained "nowrap," which I know from #Vim. Now, it all makes sense. Vim is everything; everything is Vim.

Except, I keep trying to escape out of Insert mode on #freecodecamp. Slight inconvenience to be aligned with the perfection that is Vim.

How to create a #responsive grid system with #CSS #Grid | Go Make Things

> I recently updated the grid system on my site from #Flexbox to CSS Grid. Today, I wanted to share how to use it, how it works under-the-hood, and why I made the switch. Let’s dig in! A responsive grid system My websites tend to be pretty boring. Years ago, I decided to prioritize simple readability over flashy features, and that seems to resonate with a lot of people.

Jeff Sikes
2 months ago

Sharing my work to keep me honest on this project. Just a tiny bit of progress tonight - fancier looking profile cards. Mastodon is going to come out with this feature before I can even preview it for y'all. 😅

#CSS #FlexBox is amazing, by the way.

Yet another screenshot of my Pinned Page experiment, showing how the upcoming pinned / featured profile feature could work.
ppk 🇪🇺
3 months ago

And @rachelandrew was right: being able to refer to #grid makes some aspects of #flexbox much easier to explain.

ppk 🇪🇺
3 months ago

Now working on the #css #flexbox chapter that I wrote in April or so. It needs to be revised a bit, mostly to make the topic order flow more logically.

Whenever I need to work with flexbox, I use this amazing resource 😊 #css #flexbox

If you're someone who frequently forgets about CSS flex properties like me, you might find this VS Code extension helpful.

Name: CSS Flexbox Cheatsheet
Description: Open a flexbox cheatsheet directly in VS Code.
Version: 3.3.1
Publisher: Dzhavat Ushev
VS Marketplace Link:

#css #flex #devFront #FrontEnd #devFrontEnd #developper #tech #flexbox #vscode

Carlo Grosoli
4 months ago

I'm quite a FrontEndDev rookie.

So if anyone wants to give constructive criticism, I'll be happy to enrich my knowledge.

I tried to make a navbar menu with flexbox and min() function for gaps, without using justify-content.

The menu must take the full 90vw on mobile, and keep itself right-aligned with a 2.5em gap from tablet to desktop, avoiding queries, hamburger/kebab hidden menus.

Feel free to demolish it. I'm learning.

#flexbox #navbar #menu #css

When mobile, links are "space-between" justified.
When tablet-desktop, links are forced to a typical Swiss Style mittleuropa asymmetry, with a 2.5em gap.
Jacob Rask
5 months ago

The documentation for the flex utility classes turned into a nice learning resource for #flexbox

Terence Eden
5 months ago

Here's a knotty #CSS problem.

Is it possible to apply #FlexBox to <select><options>?

I want my options laid out in a horizontal line (which *is* possible) and to wrap to a new line if there isn't space (which I think is impossible).

Anyone cleverer than me able to figure it out?


(Horizontal layout doesn't work on Safari.)

ppk 🇪🇺
5 months ago

... and with the writing of the final example the #flexbox chapter is really done - in draft.

One more edit and I'm happy for now. Then His Tabness can go over it, and my publisher's editor as well, and then we'll see.

ppk 🇪🇺
5 months ago

So there is an #a11y problem with #flexbox order.

It hasn't been solved, right? Have any suggestions for solving it been made?

I didn't look at this problem in 20 months or so, and stuff may have changed.

Terence Eden
5 months ago

🆕 blog! “Responsive Yearly Calendar with Flexbox”

This blog has a calendar showing my yearly archives. It was in a table layout - which made sense when I first designed it - but had a few spacing niggles and was hard to make responsive. Now, it behaves like this: The code is relatively straightforward. The HTML for the calendar looks like this: […]

👀 Read more:

#css #flexbox #HTML5 #responsive

A grid of calendars. One calendar item has moved to the next line.
ppk 🇪🇺
5 months ago

Temporarily withdrew from #btconf to lie down for half an hour and do some thinking on #flexbox and aspect-ratio.

Marie :v_trans:
5 months ago

Marie learns #flexbox so she can make her website a lot better with it's upcoming rewrite
(originally I wanted to change it's layout, but it's becoming a completely new site xD)

A picture of my desk with my monitor displaying VSCode with a stylesheet open, as well as a pnp video of a flex box tutorial, and my Chromebook next to it with Firefox displaying the page hosted with the 5Server VSCode extension
ppk 🇪🇺
5 months ago

I'm in the train to Düsseldorf. Old-timers who followed me ten years ago on the bird site know what that means: I'll be bored and tooting.

Have a question? Ask away. Especially about #flexbox, right now I have the entire simplified sizing algorithm in my head.

ppk 🇪🇺
6 months ago

If you ever used a #flexbox flex-shrink value of 2 or higher, this would be an excellent time to tell me about it.

I'm about to write in the #css book that a flex-shrink value other than 1 or 0 is pointless.

ppk 🇪🇺
6 months ago

Updated the #css #flexbox algorithm page with some notes about min-width and max-width, and especially that one tricky case where strange things happen.

ppk 🇪🇺
6 months ago

Proven: if a #css #flexbox has a flex-basis and a smaller min-width, the flex-basis behaves as a width: it does not allow flex items to grow to their min-content width, something that is allowed without the min-width

But it's *not* the case that in the presence of the min- or max-width, flex-basis is always interpreted as width - the combination mentioned above is an exception to the rule that min- and max-width work as expected on flex items while leaving flex-basis and width behaviour intact.

@crocedev agreed, flex-box is the highlight of my CSS practices.

Previously everything was a div, now everything is a div with display flex-box.


6 months ago

Day 82 of #100daysofcode was really good and immensely productive for me. Having a day off gave me the chance to take a lot of time for coding today. I started with #GitHub and #Git, then moved on to #Flexbox and positioning. I had an absolute blast playing around with all the new knowledge and can't wait to go deeper tomorrow. So far, the #Academind teaching style is simply great, and I am more than willing to continue with the course.

ppk 🇪🇺
6 months ago

Wonderful. Wrecked my brain for an hour over an apparent #flexbox inconsistency, turns out I made a simple coding mistake.

@ppk this is why I refuse to learn grid; table layouts still take up half my brain

#flexbox #grid #css

ppk 🇪🇺
7 months ago

Since I'm now writing #css #grid and revising #flexbox, there will come a time pretty soon where I'll have to keep both systems in my brain's RAM at the same time. That means there will be little room for anything else.

Alvaro Montoro
7 months ago

New cartoon: Wrap Battling

It comes with a short blog post about flex-wrap:

#css #comic #webcomic #comicss #flexbox

Cartoon titled 'Wrap Battling' showing two rappers singing/battling about flex-wrap wrap or wrap-reverse.
Dan Jacob
7 months ago

SVGs seem to behave oddly in flexbox when doing some DOM swapping...(flex or inline-flex seems to be ignored by the svg temporarily, so e.g. a button with svg+text ends up vertically stacked rather than horizontal).

#webdev #flexbox #svg

Josiah Winslow
7 months ago

The bug has to do with font-face, #flexbox, and overflow: hidden.

Most of the time, even if the text in a flex item with overflow: hidden and a local font is not being hidden, the image still renders with the text cut off (shown here with text-overflow: ellipsis).

Left is the original behavior; right is with my workaround.


Obi-Wan Kenobi said something similar when he died and then kept hanging around as a blue apparition.

Mark J. Cain... @cainmar... | Feb 13
The resurrection means that the risen Jesus is present with you now. Jesus tells us, 'I am with you always.' The result of the resurrection is not only His power and His presence but also His provision.

7:48 PM | Feb 13, 2023
Made with

Obi-Wan Kenobi said something similar when he died and then kept hanging around as a blue apparition.

Mark J. Cain ن @cainmarkj | Feb 13
The resurrection means that the risen Jesus is present with you now. Jesus tells us, 'I am with you always.' The result of the resurrection is not only His power and His presence but also His provision.

7:48 PM | Feb 13, 2023
Made with
Zach Mitchell, PhD
7 months ago

As a backend engineer mostly focused on low-level networked stuff, #css has always seemed like black magic.

May I introduce you to Flexbox Froggy:

It's delightful and I actually feel like I understand #flexbox now.

Kevin Bowen :xfce:
7 months ago

Sheesh. I thought it was still Thursday. This week has been just a blur of #CSS & #Flexbox I think I managed to learn a few assorted things. Time to head out foraging & perhaps go mano y mano with a burrito. Happy Friday!

Andy Zeigert
7 months ago

Pro web developer here.

To this day I still type "flexbox playground" into a search engine a few times per week. Never bothered to bookmark one.

#flexbox #webdev #design

Why did the #CSS "owl selector" go out of style again? I thought the whole problem with #flexbox flow using gap was the lack of exceptions you could make. So what changed?

Lars Willighagen
8 months ago

#CSS #flexbox is awesome. With just a few lines of CSS, I could make this responsive header. It has two parts, a title and a date. The date never wraps, the title does but only until it is 10–20 letters wide, at which point the date is shown below the title.

Video of on a virtual screen that is being decreased in width, showing the behavior described in this post.
ppk 🇪🇺
8 months ago

@SaraSoueidan Oh yes. The #flexbox charter has about 70 illustrations, the other layout chapters about 80 in total, with #grid not yet written.

Sir thalon :klingon:
8 months ago

Ich hab zwar mittlerweile mit der tollen Hilfe von @viviana den Fehler behoben, aber eigentlich ist das so wie es aufgebaut ist, keine gute Lösung.

Im Desktop-Layout sollte es so aussehen:

A1 B1
A2 B2

Wobei A2 und B2 am oberen Rand aligned sein sollen.

Im mobilen Layout soll es so aussehen und auch das #HTML in der Reihenfolge sein, damit Screenreader etwas sinnvolles ausgeben:


Kann man das irgendwie machen?

#CSS #Flexbox #grid

Deafblind Engineer
8 months ago

I've made excellent progress with one of my website redesigns. I still have a fair bit of work to do but I've broken the back on the minimalist design. I need to do some #accessibility work next, especially on the regions as the way I've coded #flexbox, regions isn't currently working as intended. Not sure how I screwed that up ...

ppk 🇪🇺
8 months ago

#flexbox geniuses: is there a way of saying "This flexbox should wrap, but should have at most two lines"?

I don't think there is, but I could be wrong.

Dave Mackey
8 months ago

One of the harder parts about #css is it's accumulation over time. It's one thing to go in and architect the system yourself, it's another to be thrown into an existing project where the code has accrued over time.

I ripped out a bunch of #flexbox and related code and replaced it with #grid and the dang boxes are aligning side-by-side now.

One would think positioning in CSS should be simple/foundational - and it's definitely the latter but often not the former.

8 months ago

#Design #Development #Evolutions
The guide to responsive design in 2023 and beyond · Responsive design isn’t about media queries anymore

“It’s about time we change our mindset and take the full potential of modern CSS.” — Ahmad Shadeed

#UiDesign #WebDesign #ResponsiveDesign #FluidDesign #Frontend #CSS #Grid #Flexbox #MediaQuery #ContainerQuery

9 months ago

Finally finished Flexbox Zombies!

#FlexBox #FlexBoxZombies #CSS

9 months ago

Le guide ultime pour comprendre CSS Flexbox selon moi (et j'en ai lu un paquet). C'est en anglais et relativement long, mais tout y est, mêmes les nouveautés comme la propriété gap ou les subtilités comme margin: auto.

J'ai découvert 2 ou 3 trucs que je ne connaissais pas alors que je suis un très gros utilisateur de Flexbox.

#css #flexbox #tuto

Peter Müller
9 months ago

Im dritten Teil der Serie dreht sich alles um die Gestaltung von responsiven Layouts per CSS:

Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid

Der Kurs wurde für diese Neuauflage komplett überarbeitet, aktualisiert, gestrafft und um neue Inhalte erweitert.

#CSS #Responsive #Flexbox #Grid

While we wait for browsers to implement the `text-wrap: balance;` #CSS property and value for text (pleeeeeease! 🙏), I may have created a silly — and probably sub-optimal — function to do it with HTML block elements:

Tell me what you think!

But why? Just because a colleague needed it, we could not find a solution in pure CSS, and I like challenges… 😅

#Flexbox #JavaScript