{"id":18260104,"url":"https://github.com/roppa/css-flexbox-example","last_synced_at":"2026-01-20T07:33:40.303Z","repository":{"id":17736690,"uuid":"20575659","full_name":"roppa/CSS-Flexbox-Example","owner":"roppa","description":"Using CSS Flexbox to create a layout","archived":false,"fork":false,"pushed_at":"2018-02-02T19:56:31.000Z","size":51,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-08T23:44:41.757Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/roppa.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-06-06T19:35:00.000Z","updated_at":"2018-02-02T19:55:43.000Z","dependencies_parsed_at":"2022-09-24T18:24:21.834Z","dependency_job_id":null,"html_url":"https://github.com/roppa/CSS-Flexbox-Example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/roppa/CSS-Flexbox-Example","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roppa%2FCSS-Flexbox-Example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roppa%2FCSS-Flexbox-Example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roppa%2FCSS-Flexbox-Example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roppa%2FCSS-Flexbox-Example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/roppa","download_url":"https://codeload.github.com/roppa/CSS-Flexbox-Example/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roppa%2FCSS-Flexbox-Example/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28598165,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-20T02:08:49.799Z","status":"ssl_error","status_checked_at":"2026-01-20T02:08:44.148Z","response_time":117,"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":[],"created_at":"2024-11-05T10:42:05.719Z","updated_at":"2026-01-20T07:33:40.282Z","avatar_url":"https://github.com/roppa.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"## CSS Flexbox\n\nThis article was first written 4 years ago. Since then flex has become standard in things like react native. I had moved away from front end stuff only to come back to work on a react native app so had to start flexing again.\n\nLet's be honest, CSS float layouts were a nightmare. Absolute and relative positioned things we won't say anything about. And ```display: table``` just feels really dirty. I mean **really** dirty. Especially when you started out using tables for layouts (I even felt dirty doing that, even though others felt it was fine).\n\nThere was always a designer who insists that content order is rearranged depending on the device - content in a different order on mobile vs desktop. That \"dirty\" feeling starts to surround me.\n\n**NOW CAN WE PLEASE START USING FLEXBOX?** \u0026hellip; or [grid](http://www.w3.org/TR/2015/WD-css-grid-1-20150917/) :-)\n\nI say f*ck it. We are all about progressive enhancement and have been for years. I say if you want to work on bleeding edge projects then use it. If there is money riding on older browsers, then that's too bad, use the dirty table layout. But thankfully things like React native are using it!\n\nFlexbox is a flexible **layout system** (an algorithm for positioning elements, whether floated, inline, table, grid) add on. So when I say **flexible** layout system, I mean flexible in lots of ways. Reordering content is a breeze. Resizing is a pleasure.\n\nIt is a little tricky to get your head around it to begin with, like a lot of things in the industry, so first I'd suggest going through some of the resources below to get a good grounding.\n\n## Terminology\n\n\u003cdl\u003e\n  \u003cdt\u003eaxis\u003c/dt\u003e\n  \u003cdd\u003ethe flow in which elements flow, vertical or horizontal\u003cdd\u003e\n  \u003cdt\u003ecross axis\u003c/dt\u003e\n  \u003cdd\u003eopposite to the parent axis\u003cdd\u003e\n  \u003cdt\u003eflex-container\u003c/dt\u003e\n  \u003cdd\u003ea parent container that contains flexible child \u003cb\u003eflex-items\u003c/b\u003e\u003c/dd\u003e\n  \u003cdt\u003eflex-items\u003c/dt\u003e\n  \u003cdd\u003enested child elements that adjust to parents size\u003c/dd\u003e\n\u003c/dl\u003e\n\n## Basics\n\nLayouts are based on parent layout containers and flexible child containers. What this means is when the parent containers are resized, the children automatically adjust.\n\nYou start off with a container element, a **flex container**, and set the display attribute like so: ``` display: flex; ``` (add any browser prefixes as necessary). You can also set it to ```display: inline-flex``` if you want it to be inline. Then we can go ahead and fill it with child elements. You don't have to specify any attributes on the child elements, they will automatically become child flex items.\n\nThere is another concept to cover - the main and cross axis. X and Y if you like. This is the flow direction, either x or y, main or cross.\n\n## Examples\n\n- [Layout example](./examples/layout/index.html)\n\n## Resources\n\n- [Flexbox.io](http://flexbox.io/)\n- [Scotch.io tutorial](https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties)\n- [CSS Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n- [Mozilla](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n- [W3.org](http://www.w3.org/TR/css3-flexbox/)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Froppa%2Fcss-flexbox-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Froppa%2Fcss-flexbox-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Froppa%2Fcss-flexbox-example/lists"}