⚡ Flexbox-Guide 🚀 Flexbox layout made simple with an Interactive tool
Tags: 100daysofcode, css, codenewbie, flexbox
Published: 2021-04-14 08:49:49

## TLDR 

An `Interactive Tool` for the concept of Flexbox and Responsive Design. Simply set the attributes as needed and copy the CSS code. 🎉

Website Link -  [http://flexbox-guide.vercel.app/](http://flexbox-guide.vercel.app/) 

Github Repo -  [https://github.com/Souravdey777/flexbox-guide](https://github.com/Souravdey777/flexbox-guide) 

Docs Link -  [https://souravdey777.github.io/flexbox-guide/](https://souravdey777.github.io/flexbox-guide/) 

---

### About `Flexbox-Guide`

Flexbox-Guide is a website developed for web developers and Coding newbies learning `CSS Flexbox Layout`. This website can be used for both learnings or generating the code. Simply arrange the flex items as you need and copy the CSS to your code.

Before the Flexbox Layout module, there were four layout modes:

- Block, for sections in a webpage
- Inline, for text
- Table, for two-dimensional table data
- Positioned, for the explicit position of an element

The Flexible Box Layout Module makes it easier to design a flexible responsive layout structure without using float or positioning.

For a detailed explanation please check [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) by `Chris Coyier`

**Why wait? Straightaway go to the website and join the Awesomeness** 😎
[https://flexbox-guide.souravdey777.vercel.app](https://flexbox-guide.vercel.app)


![flexbox-guide.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1612468370123/1131rKfWL.gif)

### Inspiration 💡

I got the Idea while I was explaining flexbox to a few of the interns in my office. I was explaining to them with three sample cards that how to make responsive cards with flexbox. And I have seen a lot of web developers using static `paddings` and `margins` and handling it with a lot of media queries. But, why go for such a mess when we have the `CSS flexbox layout`.

This tool was also created with the same thought process. So that all the budding software developers can learn flexbox layout with an interactive tool, where you can set the attributes and check the layout as well as It will generate the CSS code for it.

### Technologies 🔨

Built with Reactjs and Love ❤️

Hosted in Vercel Cloud.

### Accomplishment 🚀

I have integrated 📈 analytics with [plausible](https://plausible.io/) with the website recently on the 29th of Jan and here are the stats [https://plausible.io/flexbox-guide.vercel.app](https://plausible.io/flexbox-guide.vercel.app). 

It also got published in a `Weekly Magzine for Designers` 🎉
[https://speckyboy.com/weekly-news-for-designers-577/](https://speckyboy.com/weekly-news-for-designers-577/) 

[![Group 31.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1612687433048/msEKE347P.png)](https://speckyboy.com/weekly-news-for-designers-577/) 


The greatest of all is that It will help the community. 

### License

📝 Distributed under the `MIT` License. See [LICENSE](https://github.com/Souravdey777/flexbox-guide/blob/main/LICENSE) for more information.

### Contribution and Support

Upvote Flexbox-Guide in 🚀 **Product Hunt**.

<a href="https://www.producthunt.com/posts/flexbox-guide?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-flexbox-guide" target="_blank">
<img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=281660&theme=light" alt="Flexbox-Guide - Flexbox-Guide : A flexbox code generator | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" />
</a>

[Open a Pull Request](https://github.com/Souravdey777/flexbox-guide/pulls) or [Raise an Issue](https://github.com/Souravdey777/flexbox-guide/issues).

👨‍🚀 Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

Hope you Loved it! Do let me know in the comments.

Want to learn more about flexbox?? Check the below link
[https://souravdey777.github.io/flexbox-guide/#learn-more-about-flexbox](https://souravdey777.github.io/flexbox-guide/#learn-more-about-flexbox)  

### Contact me 

- [Github](https://github.com/Souravdey777/)
- [LinkedIn](https://www.linkedin.com/in/souravdey777)
- [Twitter](https://twitter.com/Souravdey777)