https://github.com/yauhenkavalchuk/css-flexbox

Код учебного курса “CSS Flexbox” на YouTube-канале webDev (https://tinyurl.com/e4jhsxpj)
https://github.com/yauhenkavalchuk/css-flexbox

css css3 flexbox flexbox-css flexbox-layout

Last synced: 5 days ago
JSON representation

Код учебного курса “CSS Flexbox” на YouTube-канале webDev (https://tinyurl.com/e4jhsxpj)

• Host: GitHub
• URL: https://github.com/yauhenkavalchuk/css-flexbox
• Owner: YauhenKavalchuk
• Created: 2021-02-27T14:16:59.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-06-13T06:23:37.000Z (over 1 year ago)
• Last Synced: 2023-06-13T07:28:31.760Z (over 1 year ago)
• Topics: css, css3, flexbox, flexbox-css, flexbox-layout
• Language: CSS
• Homepage: http://youtube.com/c/YauhenKavalchuk/
• Size: 28.3 KB
• Stars: 47
• Watchers: 4
• Forks: 42
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# CSS Flexbox

### Описание курса:

В данном видеокурсе мы с вами рассмотрим технологию Flexbox.

Flexible Box Layout Module (Flexbox) - представляет собой способ компоновки элементов, в основе лежит идея оси. Другими словами все элементы можно располагать вдоль основной и поперечной осей, или вертикально и горизонтально.

Технология позволяет буквально в пару свойств создать гибкий лэйаут, или гибкие UI элементы.

### Поддержать развитие канала:

[][sponsor]

[][patron]

---

### Используемые ресурсы и инструменты:

- [Visual Studio Code (редактор кода)](https://code.visualstudio.com)

### Полезные курсы и видео:

- [CSS Grid](https://www.youtube.com/playlist?list=PLNkWIWHIRwMHlq6yOP65F_rNH5wID1U21)

- [CSS Inspiration](https://www.youtube.com/playlist?list=PLNkWIWHIRwMEosiVP_3B-h4fE7CIfZ7pI)

### Полезные ссылки:

- [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

- [Flexbox Froggy (Game)](https://flexboxfroggy.com/#ru)

---

### Быстрый старт:

- Клонируйте репозиторий: `git clone https://github.com/YauhenKavalchuk/css-flexbox.git`

- Перейдите в папку с проектом `cd css-flexbox`

- Перейдите в нужную ветку соответствующую уроку:

  - `git checkout lesson_01`

  - `git checkout lesson_02`

  - `git checkout lesson_10` и т.д.

---

### Список уроков:

- [#0 Введение (Introduction)](https://youtu.be/O-ytfplFQ3c)

- [#1 Основные понятия (Base Definitions)](https://youtu.be/9MxBkY2_WNA)

- [#2 Направление осей (Flex-direction)](https://youtu.be/OQ6GyMD5E-s)

- [#3 Обёртка элементов и отступы (Flex-wrap & Gap)](https://youtu.be/zvkE0MY1cxE)

- [#4 Выравнивание вдоль главной оси (Alignment: justify-content)](https://youtu.be/FKDfECxwC54)

- [#5 Выравнивание вдоль поперечной оси (Alignment: align-items)](https://youtu.be/_9idibPDs1s)

- [#6 Многострочное выравнивание (Alignment: align-content)](https://youtu.be/sDkL7o0LXF0)

- [#7 Индивидуальное выравнивание элементов (Alignment: align-self)](https://youtu.be/WeFMfoK9R2o)

- [#8 Размеры элементов (Flexbox Sizing)](https://youtu.be/rDdUWDaJzQ8)

- [#9 Определение порядка элементов (Order)](https://youtu.be/o_ozA-YMttU)

- [#10 Вложенность. Обёртка элементов с размерами (Nesting. Flex-basis & Flex-wrap)](https://youtu.be/ar1F5IwBeSc)

- [#11 Практические примеры использования Flexbox (Practical examples)](https://youtu.be/GGiHxIOmPaE)

---

### Связаться со мной:

[][youtube]

[][instagram]

[][linkedin]

[][twitter]

[][vk]

[youtube]: https://youtube.com/YauhenKavalchuk

[instagram]: https://instagram.com/YauhenKavalchuk

[linkedin]: https://linkedin.com/in/YauhenKavalchuk

[vk]: https://vk.com/YauhenKavalchuk

[twitter]: https://twitter.com/YauhenKavalchuk

[sponsor]: https://www.youtube.com/channel/UCE9ODjNIkOHrnSdkYWLfYhg/join

[patron]: https://www.patreon.com/YauhenKavalchuk