{"id":19486007,"url":"https://github.com/yauhenkavalchuk/css-flexbox","last_synced_at":"2025-04-25T18:31:46.369Z","repository":{"id":38341263,"uuid":"342873323","full_name":"YauhenKavalchuk/css-flexbox","owner":"YauhenKavalchuk","description":"Код учебного курса “CSS Flexbox” на YouTube-канале webDev (https://tinyurl.com/e4jhsxpj)","archived":false,"fork":false,"pushed_at":"2023-06-13T06:23:37.000Z","size":29,"stargazers_count":53,"open_issues_count":0,"forks_count":48,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-04T01:04:50.361Z","etag":null,"topics":["css","css3","flexbox","flexbox-css","flexbox-layout"],"latest_commit_sha":null,"homepage":"http://youtube.com/c/YauhenKavalchuk/","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/YauhenKavalchuk.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":"2021-02-27T14:16:59.000Z","updated_at":"2024-09-15T10:28:01.000Z","dependencies_parsed_at":"2024-11-10T20:32:50.964Z","dependency_job_id":"3e1f86e1-2f60-4ed8-bd46-391218f63a50","html_url":"https://github.com/YauhenKavalchuk/css-flexbox","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YauhenKavalchuk%2Fcss-flexbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YauhenKavalchuk%2Fcss-flexbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YauhenKavalchuk%2Fcss-flexbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YauhenKavalchuk%2Fcss-flexbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/YauhenKavalchuk","download_url":"https://codeload.github.com/YauhenKavalchuk/css-flexbox/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250872152,"owners_count":21500772,"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":["css","css3","flexbox","flexbox-css","flexbox-layout"],"created_at":"2024-11-10T20:32:46.446Z","updated_at":"2025-04-25T18:31:46.035Z","avatar_url":"https://github.com/YauhenKavalchuk.png","language":"CSS","funding_links":["https://www.patreon.com/YauhenKavalchuk"],"categories":[],"sub_categories":[],"readme":"# CSS Flexbox\n\n### Описание курса:\nВ данном видеокурсе мы с вами рассмотрим технологию Flexbox.\nFlexible Box Layout Module (Flexbox) - представляет собой способ компоновки элементов, в основе лежит идея оси. Другими словами все элементы можно располагать вдоль основной и поперечной осей, или вертикально и горизонтально.\nТехнология позволяет буквально в пару свойств создать гибкий лэйаут, или гибкие UI элементы.\n\n### Поддержать развитие канала:\n[\u003cimg alt=\"webDev | YouTube Sponsor\" src=\"https://img.shields.io/badge/Become a sponsor-F70000.svg?\u0026style=for-the-badge\u0026logo=youtube\u0026logoColor=fff\" /\u003e][sponsor]\n[\u003cimg alt=\"webDev | Patreon\" src=\"https://img.shields.io/badge/Become a patron-EF6451.svg?\u0026style=for-the-badge\u0026logo=patreon\u0026logoColor=fff\" /\u003e][patron]\n\n---\n\n### Используемые ресурсы и инструменты:\n- [Visual Studio Code (редактор кода)](https://code.visualstudio.com)\n\n### Полезные курсы и видео:\n- [CSS Grid](https://www.youtube.com/playlist?list=PLNkWIWHIRwMHlq6yOP65F_rNH5wID1U21)\n- [CSS Inspiration](https://www.youtube.com/playlist?list=PLNkWIWHIRwMEosiVP_3B-h4fE7CIfZ7pI)\n\n### Полезные ссылки:\n- [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n- [Flexbox Froggy (Game)](https://flexboxfroggy.com/#ru)\n\n---\n\n### Быстрый старт:\n- Клонируйте репозиторий: `git clone https://github.com/YauhenKavalchuk/css-flexbox.git`\n- Перейдите в папку с проектом `cd css-flexbox`\n- Перейдите в нужную ветку соответствующую уроку:\n  - `git checkout lesson_01`\n  - `git checkout lesson_02`\n  - `git checkout lesson_10` и т.д.\n\n---\n\n### Список уроков:\n- [#0 Введение (Introduction)](https://youtu.be/O-ytfplFQ3c)\n- [#1 Основные понятия (Base Definitions)](https://youtu.be/9MxBkY2_WNA)\n- [#2 Направление осей (Flex-direction)](https://youtu.be/OQ6GyMD5E-s)\n- [#3 Обёртка элементов и отступы (Flex-wrap \u0026 Gap)](https://youtu.be/zvkE0MY1cxE)\n- [#4 Выравнивание вдоль главной оси (Alignment: justify-content)](https://youtu.be/FKDfECxwC54)\n- [#5 Выравнивание вдоль поперечной оси (Alignment: align-items)](https://youtu.be/_9idibPDs1s)\n- [#6 Многострочное выравнивание (Alignment: align-content)](https://youtu.be/sDkL7o0LXF0)\n- [#7 Индивидуальное выравнивание элементов (Alignment: align-self)](https://youtu.be/WeFMfoK9R2o)\n- [#8 Размеры элементов (Flexbox Sizing)](https://youtu.be/rDdUWDaJzQ8)\n- [#9 Определение порядка элементов (Order)](https://youtu.be/o_ozA-YMttU)\n- [#10 Вложенность. Обёртка элементов с размерами (Nesting. Flex-basis \u0026 Flex-wrap)](https://youtu.be/ar1F5IwBeSc)\n- [#11 Практические примеры использования Flexbox (Practical examples)](https://youtu.be/GGiHxIOmPaE)\n\n---\n\n### Связаться со мной:\n[\u003cimg alt=\"webDev | YouTube\" src=\"https://img.shields.io/badge/youtube-FF0000.svg?\u0026style=for-the-badge\u0026logo=Instagram\u0026logoColor=white\" /\u003e][youtube]\n[\u003cimg alt=\"webDev | Instagram\" src=\"https://img.shields.io/badge/instagram-E4405F.svg?\u0026style=for-the-badge\u0026logo=Instagram\u0026logoColor=white\" /\u003e][instagram]\n[\u003cimg alt=\"webDev | LinkedIn\" src=\"https://img.shields.io/badge/linkedin-0077B5.svg?\u0026style=for-the-badge\u0026logo=linkedin\u0026logoColor=white\" /\u003e][linkedin]\n[\u003cimg alt=\"webDev | Twitter\" src=\"https://img.shields.io/badge/twitter-1DA1F2.svg?\u0026style=for-the-badge\u0026logo=Twitter\u0026logoColor=white\" /\u003e][twitter]\n[\u003cimg alt=\"webDev | VK\" src=\"https://img.shields.io/badge/vk-4680C2.svg?\u0026style=for-the-badge\u0026logo=Twitter\u0026logoColor=white\" /\u003e][vk]\n\n[youtube]: https://youtube.com/YauhenKavalchuk\n[instagram]: https://instagram.com/YauhenKavalchuk\n[linkedin]: https://linkedin.com/in/YauhenKavalchuk\n[vk]: https://vk.com/YauhenKavalchuk\n[twitter]: https://twitter.com/YauhenKavalchuk\n[sponsor]: https://www.youtube.com/channel/UCE9ODjNIkOHrnSdkYWLfYhg/join\n[patron]: https://www.patreon.com/YauhenKavalchuk\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyauhenkavalchuk%2Fcss-flexbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyauhenkavalchuk%2Fcss-flexbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyauhenkavalchuk%2Fcss-flexbox/lists"}