{"id":20526049,"url":"https://github.com/souravdey777/flexbox-guide","last_synced_at":"2025-04-14T04:11:10.664Z","repository":{"id":37718208,"uuid":"328983210","full_name":"Souravdey777/flexbox-guide","owner":"Souravdey777","description":"⚡ A Guide for the concept of Flexbox and responsive design. Simply set the attributes as you needed and copy the CSS code. 🎉","archived":false,"fork":false,"pushed_at":"2022-10-05T19:48:32.000Z","size":6080,"stargazers_count":34,"open_issues_count":8,"forks_count":8,"subscribers_count":1,"default_branch":"main","last_synced_at":"2023-03-02T20:21:30.792Z","etag":null,"topics":["code-generation","code-generator","codenewbie","css","dynamic-code","flex","flex-layout","flexbox","flexbox-css","flexbox-layout","flexible","guide","react","reactjs","references","responsive","responsive-design","responsive-layout","responsive-web-design","style-guide"],"latest_commit_sha":null,"homepage":"https://flexbox-guide.souravdey777.vercel.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Souravdey777.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":["https://paypal.me/SDey777"]}},"created_at":"2021-01-12T12:41:37.000Z","updated_at":"2022-10-31T23:56:24.000Z","dependencies_parsed_at":"2022-08-21T17:21:11.472Z","dependency_job_id":null,"html_url":"https://github.com/Souravdey777/flexbox-guide","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Souravdey777%2Fflexbox-guide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Souravdey777%2Fflexbox-guide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Souravdey777%2Fflexbox-guide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Souravdey777%2Fflexbox-guide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Souravdey777","download_url":"https://codeload.github.com/Souravdey777/flexbox-guide/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248819404,"owners_count":21166477,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["code-generation","code-generator","codenewbie","css","dynamic-code","flex","flex-layout","flexbox","flexbox-css","flexbox-layout","flexible","guide","react","reactjs","references","responsive","responsive-design","responsive-layout","responsive-web-design","style-guide"],"created_at":"2024-11-15T23:12:03.512Z","updated_at":"2025-04-14T04:11:10.644Z","avatar_url":"https://github.com/Souravdey777.png","language":"JavaScript","funding_links":["https://paypal.me/SDey777","https://www.buymeacoffee.com/Souravdey777"],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n\u003ca  href=\"https://flexbox-guide.souravdey777.vercel.app\" target=\"_blank\"\u003e\n\u003cimg src=\"./public/logo.png?raw=true\" width=100px title=\"Flexbox-Guide: A Flexbox Code Generator\" alt=\"Flexbox-Guide\"/\u003e\n\u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n\u003ca  href=\"https://flexbox-guide.souravdey777.vercel.app\" target=\"_blank\"\u003e\n\u003cimg src=\"https://img.shields.io/badge/-Flexbox Guide-FFA500?style=flat\" height=\"30px\" title=\"Flexbox-Guide: A Flexbox Code Generator\" alt=\"Flexbox-Guide\"/\u003e\n\u003c/a\u003e\n\u003c/p\u003e\n\n# `Flexbox-Guide`\n\n\u003cp \u003e\n\u003ca  href=\"https://flexbox-guide.souravdey777.vercel.app\" target=\"_blank\"\u003e\n  \u003cb\u003eGo to Flexbox-Guide \u0026rarr;\u003c/b\u003e\n\u003c/a\u003e\u003c/p\u003e\n\n⚡ A Guide for the concept of `Flexbox` and `Responsive Design`. Simply set the attributes as needed and copy the CSS code. 🎉\n\n\n\u003cp align=\"center\"\u003e\n\u003ca  href=\"https://flexbox-guide.souravdey777.vercel.app\" target=\"_blank\"\u003e\n  \u003cimg src=\"./public/cover.jpg?raw=true\" width=1280px title=\"Flexbox-Guide: A Flexbox Code Generator\" alt=\"Flexbox-Guide\"/\u003e\n\u003c/a\u003e\n\u003c/p\u003e\n\n### Table of Contents\n\n- [About `Flexbox-Guide`](#about-flexbox-guide)\n- [Features](#features)\n- [Technologies](#technologies)\n- [Setup](#setup)\n- [Contribution and Support](#contribution-and-support)\n- [License](#license)\n- [Contact](#contact)\n- [Learn More about `Flexbox`](#learn-more-about-flexbox)\n- [Learn More about `Reactjs`](#learn-more-about-reactjs)\n\n## About `Flexbox-Guide`\n\nFlexbox-Guide is a website developed for web developers and Coding newbies learning `CSS Flexbox Layout`. This website can be used for both learning or generating the code. Simply arrange the flex items as you need and copy the CSS to your code.\n\nBefore the Flexbox Layout module, there were four layout modes:\n\n- Block, for sections in a webpage\n- Inline, for text\n- Table, for two-dimensional table data\n- Positioned, for explicit position of an element\n\nThe Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.\n\nFor detailed explanation please check [A Complete Guide to `Flexbox`](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) by `Chris Coyier`\n\n**Why wait? Straightaway go to the website and join the `Awesomeness`** 😎\n\n[https://flexbox-guide.souravdey777.vercel.app](https://flexbox-guide.souravdey777.vercel.app)\n\n\u003cp align=\"center\"\u003e\n\u003ca  href=\"https://flexbox-guide.souravdey777.vercel.app\" target=\"_blank\"\u003e\n  \u003cimg src=\"./public/flexbox-guide.gif\" width=1280px title=\"Flexbox-Guide: A Flexbox Code Generator\" alt=\"Flexbox-Guide\"/\u003e\n\u003c/a\u003e\n\u003c/p\u003e\n\n\u003c!-- ##### Video Demo--\u003e\n##### Blog about Flexbox-Guide\n\n[![Blog on Flexbox-Guide](https://hashnode-blog-cards.souravdey777.vercel.app/api/getHashnodeBlog?url=https://souravdey777.hashnode.dev/flexbox-guide-flexbox-layout-made-simple-with-an-interactive-tool\u0026large=true\u0026theme=light)](https://souravdey777.hashnode.dev/flexbox-guide-flexbox-layout-made-simple-with-an-interactive-tool)\n\n## Features\n\n- Dynamic code generation\n- Tool to 📚 learn Flexbox\n\n## Technologies\n\n##### For Open Source by Open Source technologies:\n\n[`Reactjs`](#learn-more-about-reactjs) and that's it. ✌🏼\n\n##### Dependencies\n\n- react ^17.0.1\n- react-dom ^17.0.1\n- react-scripts 4.0.1\n- react-toastify ^6.2.0\n\n##### Dev Dependencies\n\n- eslint: ^7.19.0\n- eslint-plugin-react: ^7.22.0\n- gh-pages: ^3.1.0\n\n\n## Setup\n\n##### Clone/download the repository on your local machine.\n\n    `git clone https://github.com/Souravdey777/flexbox-guide.git`\n\n##### Install dependencies\n\n    `npm install` or `yarn install`\n\n##### Run Snap Shot from the root directory. 🚀\n\n    `npm start` or `yarn start`\n    \n##### Alternatively you can use Gitpod\n\n[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/Souravdey777/flexbox-guide)\n\n## Contribution and Support\n\nLoved it!. ⭐ `Star the Repository` and support the project.\n\nUpvote in 🚀 **Product Hunt**.\n\n\u003ca href=\"https://www.producthunt.com/posts/flexbox-guide?utm_source=badge-featured\u0026utm_medium=badge\u0026utm_souce=badge-flexbox-guide\" target=\"_blank\"\u003e\n  \u003cimg src=\"https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=281660\u0026theme=light\" alt=\"Flexbox-Guide - Flexbox-Guide : A flexbox code generator | Product Hunt\" style=\"width: 250px; height: 54px;\" width=\"250\" height=\"54\" /\u003e\n\u003c/a\u003e\n\n[Open a Pull Request](https://github.com/Souravdey777/flexbox-guide/pulls) or [Raise an Issue](https://github.com/Souravdey777/flexbox-guide/issues).\n\n👨‍🚀 Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.\n\n\u003ca href=\"https://www.buymeacoffee.com/Souravdey777\" target=\"_blank\"\u003e\n  \u003cimg src=\"https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png\" alt=\"Buy Me A Coffee\" width=\"160\" \u003e\n\u003c/a\u003e\n\n## License\n\n📝 Distributed under the `MIT` License. See [LICENSE](https://github.com/Souravdey777/flexbox-guide/blob/main/LICENSE) for more information.\n\n## Contact\n\n[![Portfolio](http://img.shields.io/badge/-Portfolio%20Website-000000?style=flat)][website]\n[![LinkedIn](http://img.shields.io/badge/-LinkedIn-0077B5?style=flat\u0026logo=linkedIn\u0026logoColor=white)][linkedin]\n[![Twitter](http://img.shields.io/badge/-Twitter-1DA1F2?style=flat\u0026logo=twitter\u0026logoColor=white)][twitter]\n[![Mail](https://img.shields.io/badge/-Gmail-D14836?style=flat\u0026logo=gmail\u0026logoColor=white)][mail]\n[![Medium](http://img.shields.io/badge/-Medium-black?style=flat\u0026logo=medium\u0026logoColor=white)][medium]\n[![Coder Rank](http://img.shields.io/badge/-Coders%20Rank-67A4AC?style=flat\u0026logo=CodersRank\u0026logoColor=white)][codersrank]\n[![Product Hunt](http://img.shields.io/badge/-Product%20Hunt-DA552F?style=flat\u0026logo=Product%20Hunt\u0026logoColor=white)][producthunt]\n[![Speaker Deck](http://img.shields.io/badge/-Speaker%20Deck-009287?style=flat\u0026logo=Speaker%20deck\u0026logoColor=white)][speakerdeck]\n[![Instagram](http://img.shields.io/badge/-Instagram-E4405F?style=flat\u0026logo=instagram\u0026logoColor=white)][instagram]\n\n## Learn More about `Flexbox`\n\n##### Check the references below:\n\n- [Understanding Flexbox](https://github.com/ohansemmanuel/Understanding-Flexbox) by `Emmanuel Ohans`.\n- [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) by `Chris Coyier`.\n- [Flexbox by W3Schools](https://www.w3schools.com/css/css3_flexbox.asp)\n\n##### If you want to practice using flexbox, try out these games and apps that will help you master flexbox.\n\n- [Flexbox Defense](http://www.flexboxdefense.com/) is a web game where you learn flexbox while trying to stop the incoming enemies from getting past your defenses.\n- [Flexbox Froggy](http://flexboxfroggy.com/) is a game where you help Froggy and friends by writing CSS code.\n- [Flexyboxes](https://the-echoplex.net/flexyboxes/) is an app that allows you to see code samples and change parameters to see how Flexbox works visually.\n- [Flexbox Patters](https://www.flexboxpatterns.com/) is a website that shows off a bunch of Flexbox examples.\n\n## Learn More about `Reactjs`\n\nYou can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).\n\nTo learn `React`, check out the [React documentation](https://reactjs.org/).\n\n##### Code Splitting\n\nThis section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting\n\n##### Analyzing the Bundle Size\n\nThis section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size\n\n##### Making a Progressive Web App\n\nThis section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app\n\n##### Advanced Configuration\n\nThis section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration\n\n##### Deployment\n\nThis section has moved here: https://facebook.github.io/create-react-app/docs/deployment\n\n##### `npm run build` fails to minify\n\nThis section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify\n\n\n[website]: https://souravdey777.github.io/Portfolio/\n[mail]:mailto:piyush.kolkata@gmail.com\n[twitter]: https://twitter.com/Souravdey777\n[codersrank]: https://profile.codersrank.io/user/souravdey777\n[youtube]: https://youtube.com/\n[instagram]: https://www.instagram.com/souravdey777/\n[linkedin]: https://www.linkedin.com/in/sourav-dey/\n[medium]: https://medium.com/@Souravdey777\n[producthunt]: https://www.producthunt.com/@souravdey777\n[speakerdeck]: https://speakerdeck.com/Souravdey777\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsouravdey777%2Fflexbox-guide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsouravdey777%2Fflexbox-guide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsouravdey777%2Fflexbox-guide/lists"}