Let's refresh Our CSS Flexbox Memory. Here's a Tutorial & Cheat Sheet of everything you can do with CSS flexbox. Let's Go ๐๏ธ
The orig...
For further actions, you may consider blocking this person and/or reporting abuse
This tool is awesome. Makes flexbox easy to understand. I use it alot.
demos.scotch.io/visual-guide-to-cs...
Nice. This is also a good one: https://progressivered.com/fla/?d=0&v=1&h=1&s=0&i=000&a=000#playground
This is also good for beginners to see how common components can be structured. flexboxpatterns.com/
Wow, that's a really good resource. Thank you for sharing.
Most welcome โค๏ธ
A legend made this software, thank you for sharing this ๐ ๐
Thanks
Niiiice!
Why not this is a PWA?
nice visuals, may I ask what you used? ๐
I took Images from Flaticon.com
I gave them credits before conclusion part
Awesome, thanks! ๐โค
Can you please tell me whats the name of icons pack you used? I am a member at Flaticon, I liked the icons you used.
Thank you for sharing this.
Most welcome โค๏ธ
Awesome reference. Thanks for this!
Really good job! Thank you. It would be amazing if you could do something similar about Grids ๐
Thank you for the well wishes. I'll think about Grids in future. Till then, stay tuned โค๏ธ
Dear Joy Shaheb๏ผ may I translate your article into Chinese?I would like to share it with more developers in China. I will give the original author and original source.
Sure. Best of luck โค๏ธ๐๏ธ
Thank You Very Much๏ผ
Thank you sir... that's cool..but could I download or save it offline?? Bcz I have some Net issues
Sure,
How could I download it offline?
Click on the image. Then download/save it/ take screenshots
Thank you so much for sharing this wonderful resource.
Most welcome. In future , I'm planning to create a cheat sheet for CSS Grid model as well, Till then , stay tuned & take care โค๏ธ
Well explained!
Thank you โค๏ธ
youtube.com/watch?v=OZk0rHtLnd8&t=...?
note that
ordercan be used with negative valuesAwesome, i just learnt place-content...๐๐ฟ
Wow, very simple to understand with pictures!! ๐ Finally, I'll get all info easily with flexbox! Thank
Most welcome โค๏ธ
Great effort, thanks Joy, very useful!
Most welcome โค๏ธ
nice tutorial
Useful article.
Nice pics but what about
justify-self? What aboutgapthat already works in every new browser except Safari? What about basics likeflex-basis?Perhaps I miss the purpose here.
Amazing๐
Is there a similar cheat sheet like this but for CSS Grid?
Will make it in the future if possible. Till then, stay tuned โค๏ธ๐
Nice article. The little trick if you want to center an object (X and Y) in 2 lines :
display: grid;
place-items: center;
Thanks for sharing. This is an awesome resource!
Thanks!
Most welcome โค๏ธ
Nice presentation
Great resource for Flexbox. Nice work.
Thank you for the feedback ๐ โค๏ธ
Thanks for that! I love flex box but sometimes I hate it as well. But this cheat sheet gets a nice overview and hopefully reduces by frustration in the future.
Most welcome Felix,
You can follow me along if you're interested to get more contents like these in future.
Why we use flexbox or grid? What do you think of this?
Both of them are different type of Architecture. & they have the ability to produce the same results. It totally depends on the developer which architecture he/she likes to follow.
I've also found this useful for some of those pesky older browser flex bugs. github.com/philipwalton/flexbugs
This tool makes me feel happy and confident. When next I will use my flexbox now, no more struggling with positioning child elements
This is very good content. Well done!
Great work ๐คฉ thank you so much ๐
Most welcome โค๏ธ
Nice cheat.
Nice chat.
Nice cat.
This is epic man ๐คฃ๐คฃ
Take medals ๐ ๐
Excellent article!
Great article. Thanks for sharing.
โค๏ธ๏ธ !!
If you use VS Code, there's an extension called Flex-Box cheat Sheet you can use that too!
Very nice article, can you explain more on flex-grow, flex-shrink ?
Hello @davistran86 ,
Hopefully in future, I'll post an article/ youtube video explaining the topic in details with some examples, if possible. Till then, stay tuned & take care โค๏ธ
I am also from Bangladesh. Feel good that, I am reading our vi brother post. Concise and clear idea on Flexbox. Thanks Joy
Thank you soo much for the well wishes bhaiya โค๏ธ
Most welcome โค๏ธ
Thank you โค๏ธ
Thank you soo much for the well wishes. โค๏ธโค๏ธ๐
This is awesome.
I didn't know there is warp-reverse. Thanks.
Thanks man! Really handy!
Great post, Thanks!
flexboxfroggy.com This website is best to learn flex and apply it.
thanku so much for this .. best wishes.
Good
How to fix width if I create a layout like this comment box, image profile was fixed width and the comment message box has flexible width. Or should not use flex.