[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-73691":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":18,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":22,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":32,"readmeContent":33,"aiSummary":34,"trendingCount":16,"starSnapshotCount":16,"syncStatus":35,"lastSyncTime":36,"discoverSource":37},73691,"Flexbox-Labs","prazzon\u002FFlexbox-Labs","prazzon","A web app for creating flexible layouts with the power of CSS Flexbox.","https:\u002F\u002Fflexboxlabs.netlify.app\u002F",null,"TypeScript",3949,365,23,5,0,1,3,13,29.69,"MIT License",false,"master",true,[26,27,28,29,30,31],"framer-motion","react","sass","typescript","typescript-react","vite","2026-06-12 02:03:16","\u003Cp align=\"center\">\n\u003Cimg src=\".github\u002Fimages\u002Fbanner.png\" \u002F>\n\u003C\u002Fp>\n\n\u003Cdetails>\n  \u003Csummary>Table of Contents\u003C\u002Fsummary>\n  \u003Cul>\n    \u003Cli>\n      \u003Ca href=\"#about\">About\u003C\u002Fa>\n      \u003Cul>\n        \u003Cli>\u003Ca href=\"#features\">Features\u003C\u002Fa>\u003C\u002Fli>\n        \u003Cli>\u003Ca href=\"#built-with\">Built With\u003C\u002Fa>\u003C\u002Fli>\n      \u003C\u002Ful>\n    \u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#usage\">Usage\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#live-demo\">Live Demo\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#getting-started\">Getting Started\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#contributing\">Contributing\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#license\">License\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#feedback\">Feedback\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002Fdetails>\n\n## About\nFlexbox Labs is a visual tool that helps create layouts using CSS Flexbox. It offers an intuitive interface that shows changes in real-time, making it easy to experiment and learn.\n\n### Features\n- **Live Preview:** Preview changes in real-time as you adjust parameters.\n- **Playground Customization:** Add, delete, or duplicate flex items.\n- **Undo and Redo Changes:** Easily revert or redo modifications for easy experimentation.\n- **Edit Flex Properties:** Edit both flex container and individual flex item properties.\n- **Save\u002FLoad Layouts**: Save, load or delete custom layouts.\n- **Pre-build Layouts**: Load pre-built layouts\u002Ftemplates.\n- **Export HTML and CSS Code:** Get HTML and CSS code for the generated layout.\n\n### Built with\n\n[![NextJS][nextjs-image]][nextjs-url]\n[![React][react-image]][react-url]\n[![TypeScript][typescript-image]][typescript-url]\n[![Sass][sass-image]][sass-url]\n[![Framer][framer-image]][framer-url]\n\n![FlexLab Screenshot](.github\u002Fimages\u002FScreenshot1.png)\n\n## Usage\nVisit the live demo and explore the playground using the toolbar. To customize the flex container, navigate to the Edit tab. Select any item from the playground to modify its individual flex properties. Once satisfied with your layout, click the code button on the tab to get the generated HTML and CSS code.\n\n## Live Demo\nCheck out the live demo of Flexbox Labs: [Demo](https:\u002F\u002Fflexboxlabs.netlify.app\u002F)\n\n## Getting Started\n\n#### 1. Clone the repository\n\n```shell\ngit clone https:\u002F\u002Fgithub.com\u002Fprazzon\u002Fflexbox-labs.git\n```\n\n#### 2. Navigate to the app directory\n```shell\ncd flexbox-labs\n```\n\n#### 3. Install npm dependencies\n\n```shell\nnpm install\n```\n\n#### 4. Run the dev server\n\n```shell\nnpm run dev\n```\n\n#### 5. Open the app in your browser\n\nVisit [http:\u002F\u002Flocalhost:5173](http:\u002F\u002Flocalhost:5173) in your browser.\n\n## Contributing\nYou are welcome to contributions to Flexbox Labs! If you'd like to contribute, please follow these steps:\n1. Fork the repository.\n2. Create a new branch: `git checkout -b feature\u002Fnew-feature`\n3. Make your changes and commit them: `git commit -m 'Add new feature'`\n4. Push to the branch: `git push origin feature\u002Fnew-feature`\n5. Submit a pull request outlining the changes you've made.\n6. Wait for me to review and merge your pull request\n\n## License\nFlexbox Labs is licensed under the [MIT License](LICENSE).\n\n## Feedback\n\nIf you have any feedback, suggestions, or issues, please [open an issue](https:\u002F\u002Fgithub.com\u002Fprazzon\u002Fflexbox-labs\u002Fissues).\nYour input is appreciated!\n\n## Acknowledgements\n\n- [use-hooks](https:\u002F\u002Fusehooks.com\u002F)\n- [react icons](https:\u002F\u002Fusehooks.com\u002F)\n\n[nextjs-image]: https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FNextJS-1a1a1a?style=for-the-badge&logo=nextdotjs\n[react-image]: https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FReact-20232A?style=for-the-badge&logo=react&logoColor=61DAFB\n[typescript-image]: https:\u002F\u002Fshields.io\u002Fbadge\u002FTypeScript-3178C6?logo=TypeScript&logoColor=FFF&style=for-the-badge\n[sass-image]: https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FSass-CC6699?style=for-the-badge&logo=sass&logoColor=white\n[framer-image]: https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FFramer%20Motion-1a1a1a?style=for-the-badge&logo=framer\n\n[nextjs-url]: https:\u002F\u002Fnextjs.org\u002F\n[react-url]: https:\u002F\u002Freact.dev\u002F\n[typescript-url]: https:\u002F\u002Fwww.typescriptlang.org\u002F\n[sass-url]: https:\u002F\u002Fsass-lang.com\u002F\n[framer-url]: https:\u002F\u002Fwww.framer.com\n","Flexbox Labs 是一个用于创建灵活布局的网页应用，利用 CSS Flexbox 的强大功能。其核心功能包括实时预览、自定义布局、撤销和重做更改、编辑 Flex 属性以及保存\u002F加载布局等。此外，用户还可以导出生成的 HTML 和 CSS 代码。该项目采用 TypeScript 编写，并结合了 React、Sass 和 Framer Motion 等技术，提供了一个直观且高效的界面。适合前端开发者在设计响应式布局时使用，无论是初学者学习 Flexbox 还是经验丰富的开发者快速原型制作，都能从中受益。",2,"2026-06-11 03:46:55","high_star"]