{"id":19032421,"url":"https://github.com/faiqa-batool/css-flexbox","last_synced_at":"2025-07-31T03:32:58.959Z","repository":{"id":246959271,"uuid":"822768630","full_name":"Faiqa-batool/CSS-Flexbox","owner":"Faiqa-batool","description":"This repository includes the practice code I implemented while learning CSS Flexbox","archived":false,"fork":false,"pushed_at":"2024-07-05T20:09:11.000Z","size":34,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-23T16:53:30.464Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","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/Faiqa-batool.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-01T19:30:12.000Z","updated_at":"2024-07-06T17:13:41.000Z","dependencies_parsed_at":"2024-07-06T01:25:41.562Z","dependency_job_id":"ea89c446-b3b2-4e60-96b9-f015431f4084","html_url":"https://github.com/Faiqa-batool/CSS-Flexbox","commit_stats":null,"previous_names":["faiqa-batool/css-flexbox"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Faiqa-batool/CSS-Flexbox","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Faiqa-batool%2FCSS-Flexbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Faiqa-batool%2FCSS-Flexbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Faiqa-batool%2FCSS-Flexbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Faiqa-batool%2FCSS-Flexbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Faiqa-batool","download_url":"https://codeload.github.com/Faiqa-batool/CSS-Flexbox/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Faiqa-batool%2FCSS-Flexbox/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266602790,"owners_count":23954694,"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","status":"online","status_checked_at":"2025-07-22T02:00:09.085Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"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-08T21:28:35.519Z","updated_at":"2025-07-23T01:32:47.617Z","avatar_url":"https://github.com/Faiqa-batool.png","language":"CSS","readme":"# CSS-Flexbox\nThis repository includes the practice code I implemented while learning CSS Flexbox\n\nFlexbox is applied to position the elements easily \u003c/br\u003e\nWe apply display: flex; to the parent div, so that the flexbox sets the position of the child divs \u003c/br\u003e\n### Before applying flexbox:\n\n![image](https://github.com/Faiqa-batool/CSS-Flexbox/assets/115587465/6c54749e-23c3-4f34-9c11-bd36dee25d1d)\n\u003c/br\u003e\n\n### After Applying Flexbox:\n\ndisplay: flex;\n\n![image](https://github.com/Faiqa-batool/CSS-Flexbox/assets/115587465/8029c326-7a50-473d-ab19-ad5767f0a4d5)\n\u003c/br\u003e\n\n### Justify-content : center; \n\n/flex-start /flex-end /space-betwen /space-evenly /space-around \u003c/br\u003e\n//align item horizontally\n\n![image](https://github.com/Faiqa-batool/CSS-Flexbox/assets/115587465/15c1a2e0-f2ac-465a-a39e-7cbbc1f18257)\n\u003c/br\u003e\n\n### align-items: center; \n\n// align items vertically\n\u003c/br\u003e\n\n![image](https://github.com/Faiqa-batool/CSS-Flexbox/assets/115587465/6fc6a247-295f-4287-b678-fce3fb6314e2)\n\n\u003c/br\u003e\n\nBut it depends on flex-direction, that is row by default.\u003c/br\u003e\n\n### flex-direction: column;\n\n![image](https://github.com/Faiqa-batool/CSS-Flexbox/assets/115587465/aaa1cf8f-e975-438f-a60b-36414bda530c)\n\n\u003c/br\u003e\n\n### flex-direction: column-reverse;\n\n![image](https://github.com/Faiqa-batool/CSS-Flexbox/assets/115587465/bef11961-3c1d-466c-a939-1ddbd203245e)\n\u003c/br\u003e\n\n### flex-direction: row-reverse;\n\n![image](https://github.com/Faiqa-batool/CSS-Flexbox/assets/115587465/8b367864-fedc-4abd-a0c6-405f1194ef90)\n\u003c/br\u003e\n\n### Flex-axes concept:\n\n![image](https://github.com/Faiqa-batool/CSS-Flexbox/assets/115587465/73bc6924-9ee3-433a-9e9e-9c55c9b3ccb9)\n\u003c/br\u003e\nJustify-content works along main-axis\n\u003c/br\u003e\n\n### flex-wrap: wrap;\n\n### align-content: center;\n\n![image](https://github.com/Faiqa-batool/CSS-Flexbox/assets/115587465/9d067448-0b59-45dd-9735-72a15b50ded4)\n\u003c/br\u003e\n\nThere is no justify-items in flexbox\n\n### flex-flow property:\n\nflex-flow: \u003cflex-direction\u003e \u003cflex-wrap\u003e\n\u003c/br\u003e\nthe above was container properties. Now we will discuss item properties.\n\u003c/br\u003e\n\n### Order property:\n\nChange item’s order by using css, the higher the order, the last the item  //bd me show hoga \u003c/br\u003e\nOrder 1 will come first, after all the non-order items\u003c/br\u003e\nDefault order is 0, that’s why all the other items will come first.\u003c/br\u003e\n\n### flex-grow:\n\nflex-grow:1;  // all the items take equal space in the container, full width. \u003c/br\u003e\n\n### flex-shrink:2;\n\nAbility of a flexbox to shrink \u003c/br\u003e\n2 means--\u003e it will shrink with the double speed\u003c/br\u003e\n\n### align-self:\n\nalign-self --\u003e only that particular item of flexbox will align separately\u003c/br\u003e\n\n#### align-self: flex-end;\n\n#### align-self: flex-start;\n\n![image](https://github.com/Faiqa-batool/CSS-Flexbox/assets/115587465/80ab4c3f-e180-4907-9a8f-e573387fd29b)\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffaiqa-batool%2Fcss-flexbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffaiqa-batool%2Fcss-flexbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffaiqa-batool%2Fcss-flexbox/lists"}