loading...
Cover image for “CSS Flexbox Cheatsheet” v3.1

“CSS Flexbox Cheatsheet” v3.1

dzhavat profile image Dzhavat Ushev Originally published at dzhavat.github.io ・2 min read

I’m really excited to share a new minor update to my “CSS Flexbox Cheatsheet” VS Code extension! 🎉

The main change in this version is adding support for selecting the directionality to be used in the interactive demos.

I think it’s important to have developer tools that support changing of writing direction because there are a ton of websites and apps out there using languages that are written from right-to-left. Assuming everyone is using English or another left-to-right language is not inclusive enough. We need to think more broadly.

Here’s how the new setting works:

Changing directionality demo

In case you need a quick refresher, directionality refers to the writing direction of the element’s text. It is specified by using the global dir attribute which can be added to any HTML element. The dir attribute can take ltr, rtl and auto as values.

The rtl value, which means right-to-left, is to be used for languages that are written from the right to the left (like Arabic).

To learn more about directionality, check out this MDN article.

This is a first iteration of the functionality. It’s not perfect but it makes the point. I’m now looking forward to your feedback! Tell me what you like about it and what you would like to see more of. I’ll make sure to add it in a future update 🙂

Go grab it while it’s hot 🔥

Discussion

pic
Editor guide
Collapse
stokry profile image
Stokry

I built a Mozilla Firefox extension for testing CSS flexbox rules.
This extension is easy to use, you can make grids, columns, experiment with all flexbox properties. Here it is - link

Collapse
ajboni profile image
ajboni

Awesome! I will try it!!

Collapse
loouislow profile image
Loouis Low

Very cool.

Collapse
mkubdev profile image
Kubdev

Awesome, thank you for this great add-on ⚡

Collapse
dzhavat profile image
Dzhavat Ushev Author

Thanks. Hope you find it useful :)

Collapse
tonydragster profile image
TonyDragster

Awsome very helpful.