DEV Community

Cover image for “CSS Flexbox Cheatsheet” v3.1
Dzhavat Ushev
Dzhavat Ushev

Posted on • Originally published at dzhavat.github.io

“CSS Flexbox Cheatsheet” v3.1

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 🔥

Top comments (6)

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
 
louislow profile image
Louis Low

Very cool.

Collapse
 
mkubdev profile image
Maxime Kubik

Awesome, thank you for this great add-on ⚡

Collapse
 
dzhavat profile image
Dzhavat Ushev

Thanks. Hope you find it useful :)

Collapse
 
tonydragster profile image
TonyDragster

Awsome very helpful.