{"id":19051818,"url":"https://github.com/nickgraffis/flex-box-demo","last_synced_at":"2026-04-17T09:31:23.909Z","repository":{"id":103519576,"uuid":"317434496","full_name":"nickgraffis/flex-box-demo","owner":"nickgraffis","description":"A demo of flex box, based on this article by CSS Tricks: https://css-tricks.com/snippets/css/a-guide-to-flexbox/","archived":false,"fork":false,"pushed_at":"2021-10-15T04:52:06.000Z","size":17,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-11-12T09:18:34.446Z","etag":null,"topics":["css","flex","flexbox","spa","vanilla-css","vanilla-javascript","vanilla-js"],"latest_commit_sha":null,"homepage":"https://nickgraffis.github.io/flex-box-demo/","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/nickgraffis.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-12-01T05:28:44.000Z","updated_at":"2022-03-11T08:28:24.000Z","dependencies_parsed_at":null,"dependency_job_id":"c6008992-19db-4128-9ab7-426ae33b5d66","html_url":"https://github.com/nickgraffis/flex-box-demo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nickgraffis/flex-box-demo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nickgraffis%2Fflex-box-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nickgraffis%2Fflex-box-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nickgraffis%2Fflex-box-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nickgraffis%2Fflex-box-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nickgraffis","download_url":"https://codeload.github.com/nickgraffis/flex-box-demo/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nickgraffis%2Fflex-box-demo/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31923075,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-17T09:10:15.403Z","status":"ssl_error","status_checked_at":"2026-04-17T09:10:14.455Z","response_time":62,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["css","flex","flexbox","spa","vanilla-css","vanilla-javascript","vanilla-js"],"created_at":"2024-11-08T23:19:42.107Z","updated_at":"2026-04-17T09:31:23.891Z","avatar_url":"https://github.com/nickgraffis.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Flex Box Demo Application\n## A demo of flex box, based on this article by CSS Tricks: https://css-tricks.com/snippets/css/a-guide-to-flexbox/\n\nThis is a simple web app that I designed to help others learn about flex box properties and values. I learned a lot from the article listed above and wanted to learn more by teaching others! Hope you enjoy! 🙂...\n\nYou can find a modal for a dictionairy of terms and basics (book icon) at the top, along with a modal for background information about flex box (i).  \n\n### How to use\n\nI'd suggest just diving in, but in general you are presented a list of properties of flex box, first properties of the parent and then properties of the children.\n\nGo through each and play around with how the values affect your boxes. Add more boxes, remove boxes, change their size.\n\n## Code display\n\nThere are two tabs, the first shows the underlying CSS that is creating the changes you see. The second tab will show you what utility classes would be used in coordination with Tailwind CSS, a very popular CSS framework.\n\n## Focus on a single child\n\nYou can click any of your boxes to see the styles for that box alone.\n\n## Skip ahead\n\nUse the table of contents at the top to search through or browse through properties.\n\n## Keep properties on the screen\n\nIf you click the { } next to each of the properties in your table of contents, those properties will persist - in addition to the properties being displayed.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnickgraffis%2Fflex-box-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnickgraffis%2Fflex-box-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnickgraffis%2Fflex-box-demo/lists"}