[FLEXBOX] Все, Что Вы Хотели Знать О Flexbox CSS

10711
27
251
19.10.2017
Описание видео:

Все, что вы хотели знать о FLEXBOX (Флексбокс). Урок о том, как сверстать сайт, применяя свойства flex-контейнера и flex-элемента. Начни зарабатывать на верстке сайтов. Коучинг по frontend: 🤍wayup.in/library/course7

Кадры из видео
[FLEXBOX] Все, Что Вы Хотели Знать О Flexbox CSS
[FLEXBOX] Все, Что Вы Хотели Знать О Flexbox CSS
[FLEXBOX] Все, Что Вы Хотели Знать О Flexbox CSS
[FLEXBOX] Все, Что Вы Хотели Знать О Flexbox CSS
Тэги из видео
Комментарии пользователей:
Artur Konandoil
2018-07-29 10:40:00

Доброго времени суток! Андрей, большое спасибо за видео! Очень ценю все ваши уроки!

Алиса Якубова
2018-07-06 03:24:59

Чуть ли не на нос пришлось посадить ноутбук, чтобы увидеть код((( Андрей, пожалуйста, сделай с этим что-нибудь! P.S. Со зрением у меня всё в порядке.

Александр Бугаков
2018-04-25 13:01:38

Большое спасибо, Вам, Андрей! Мне у Вас всё очень понравилось. И спасибо за труд Настоящему Художнику(скопипастил). Вы делаете нашу жизнь лучше!

Художник Настоящий
2018-03-21 06:35:44

Писал конспект урока для себя, чтобы потом не пересматривать. Скидываю сюда, может кому пригодится:

Чтобы флекс работал, должен быть флекс-контейнер (display: flex), относительно которого
выравниваются флекс-элементы (становятся флексами по умолчанию), что внутри.

*Некоторые браузеры не понимают display: flex, поэтому нужно также
прописывать display: -webkit-flex;

*При display: flex блоки внутри автоматически выстраиваются В РЯД

свойство flex-direction .для флекс-контейнер {display: flex}:
flex-direction: row -значение по умолчанию, элементы по горизонт. -webkit-flex-derection: row
flex-direction: row-reverse - элементы по горизонт, но начало справа. Порядок меняется
flex-direction: column - элементы по вертикали, в столбец

*приписку -reverse можно использовать к люб. свойству. Меняет порядок элементов.

свойство flex-wrap .для флекс-контейнер {display: flex}:
flex-wrap: nowrap - значение по умолчанию. Все в однку строку -webkit-flex-wrap: nowrap
flex-wrap: wrap - перебрасывает на след. строку при заполнении первой. Заполн всю доступ высоту


свойство flex-flow объединяет свойства flex-direction и flex-wrap. Пример: flex-flow: row nowrap это
тоже самое, что и flex-direction: row вместе с flex-wrap: nowrap. flex-flow работает быстрее,
чем по отдельности. Лучше использовать flex-flow


свойство justify-content .для флекс-контейнер {display: flex}:
justify-content: flex-start - значение по умолчанию. Элементы сначала
justify-content: flex-end - элементы прижимаются к правому краю
justify-content: center - элементы по центру
justify-content: space-between - равномерно распред. по всей ширине. ПРИЖИМАЮТСЯ К КРАЯМ
justify-content: space-around - равномерно распред. по всей ширине. НЕ ПРИЖИМАЮТСЯ К КРАЯМ

свойство align-items .для флекс-контейнер {display: flex}:
align-items: stretch - по умолчанию. Высота элементы ЗАПОЛНЯЕТ высоту контейнера
align-items: flex-start - элементы прижимаются к НАЧАЛУ, вверху
align-items: flex-end - элементы прижимаются к КОНЦУ, внизу
align-items: flex-center - элементы по вертикальному ЦЕНТРУ

свойство align-content .для флекс-контейнер {display: flex}:
align-content: stretch -работает когда элементов много и они перебрас. на след. строки. Равняет
строки относительно контейнеров
align-content: flex-start - начало вертикальное
align-content: flex-end - все к нижнему концу
align-content: center - по центру
align-content: space-between - равномерн. распред. 1 и послед. строки прижим. к краям (верх-низ)
align-content: space-around - равномерн. распред. 1 и послед. строки НЕ прижим. к краям (верх-низ)


СВОЙСТВА для объектов внутри флекс- контейтера. Прописывается флекс- элементу:
order: 0 - по умолчанию
order: 1, 2, 3 и т.д. - меняет ПОРЯДОК элемента

flex-grow: 0 - по умолчанию
flex-grow: 1, 2, 3 и т.д. - элемент растягивается больше остальных. Например при flex-grow: 3-
элемент в 3 раза шире остальных в строке

flex-shrink: 0 - убираем сужение или растягивание у элемента в строке при заданном wrap

flex-basis: auto - по умолч. принимает в зависимости от длины элемента.
flex-basis: 20px - задаем ширину элемента в строке


свойство flex: объединяет свойства flex-grow, flex-shrink и flex-basis. Пример: flex: 0 1 auto;
это равно flex-grow: 0, flex-shrink: 1, flex-basis: auto


align-self: auto - по умолч. Выравнивает ОТДЕЛЬНЫЙ элемент по вертикали. Есть end, center и т.д.

Sasha Karalchuk
2018-01-31 06:57:06

мне кажется, в 20-ти минутом вижео о flexbox на этом канале все четче объясняется, мб мне так показалось

Стрит!
2018-01-08 04:25:02

Спасибо за твои видео !!!) Очень хорошо все объясняешь !!!

Bogdan Korotkyi
2017-12-02 21:01:19

Спасибо, очень понятно поданная информация, единственное нормальное видео по флексам, а то все верстают и ничего не обьясняют, еще было бы неплохо получить тот недостающий файлик в описании, для закрепления:)))
еще, Андрей, что скажешь про Gulp и SASS, ты пользуешься ими при верстке, я раньше использовал только bootstrap, а щас решил еще полезные фреймворки попробовать, что сам можешь посоветовать? Был бы очень благодарен за ответ)

Вася Сидоров
2017-11-19 22:56:28

Видели, Видели, но все равно Спасибо. Го, Адаптивный марафон на Флексах ^^

Я РУССКИЙ!
2017-11-08 13:04:36

Все что то преподают ,одно и тоже))) а вот как формы заявки создавать никто не может!)))

Dmitri
2017-11-06 22:47:57

Где грид?

Олег З
2017-10-23 10:22:35

правильно говорить "на украине", а не "в украине"

Владимир
2017-10-22 05:41:34

А можно взглянуть ваше портфолио ?

traveler
2017-10-20 01:44:37

доброго времени суток Андрей! скажи пожалуйста когда и в какое время выходит твой мастер класс? а то я только ролики вижу на канале а хотелось бы тебе задать пару вопросов .

Dean Rie
2017-10-19 17:20:42

Ну Блин Так Же Никто Не Пишет Кроме Тебя)

Что ищут прямо сейчас
spellenh game guruji Meschiya Lake Far cry 6 олусо Color Mask greenking Кыргызстандагы жаңылыктар AdSense approval problem печьпод казан Warzone обзор syed foyzul karim Aprann УЛУУ gavi spain ragepc IKRA na baligh ladki ki Janaze Ki Dua malhluk seram di bali goku x rias yandere download recalbox 6
Похожие видео
12.12.2017
Flexbox CSS #1 - практика выравнивания элементов

Flexbox CSS #1 - практика выравнивания элементов

02.07.2022
Как правильно отправлять заявки на Upwork

Как правильно отправлять заявки на Upwork

03.09.2017
CSS Grid: Полное руководство

CSS Grid: Полное руководство

15.04.2020
The Ultimate CSS3 Flexbox Tutorial - Colt's Code Camp

The Ultimate CSS3 Flexbox Tutorial - Colt's Code Camp

16.08.2022
Урок по Figma 2022: создание сайта с нуля / Сетка, компоненты, Auto layout

Урок по Figma 2022: создание сайта с нуля / Сетка, компоненты, Auto layout

21.07.2018
Полный гайд по CSS Grid: адаптивная верстка за пару минут

Полный гайд по CSS Grid: адаптивная верстка за пару минут

26.03.2019

"ГРЯЗНЫЙ" ПОКРАС? ПОСМОТРИ ЭТО! ♥ Туториал по диджитал покрасу ♥

05.03.2019
#1 Верстка реального заказа landing Page | Марафон вёрстки | Артём Исламов

#1 Верстка реального заказа landing Page | Марафон вёрстки | Артём Исламов

10.04.2018
SAD! -  XXXTENTACION - Cover (Fingerstyle Guitar)

SAD! - XXXTENTACION - Cover (Fingerstyle Guitar)

23.07.2020
Переехала в США в 16 лет? Все бесплатно? О FLEX / интервью с Аружан

Переехала в США в 16 лет? Все бесплатно? О FLEX / интервью с Аружан

04.10.2022
Кастомизация меню WordPress / Меню каталога WordPress

Кастомизация меню WordPress / Меню каталога WordPress

18.04.2021
How To Make Responsive App Landing Page Website Design Using Pure HTML And CSS Only | Step By Step

How To Make Responsive App Landing Page Website Design Using Pure HTML And CSS Only | Step By Step

05.10.2020
250. Edge в VS Code, инспектор гридов, gap и флексы, математика в CSS, Hacktoberfest, опенсорс

250. Edge в VS Code, инспектор гридов, gap и флексы, математика в CSS, Hacktoberfest, опенсорс

14.03.2018
[Практика] Smart Grid CSS + Основы Node/NPM/Gulp

[Практика] Smart Grid CSS + Основы Node/NPM/Gulp

15.05.2022
Урок 1 — Базовые знания по типографике 1/3 [Типографика] [курс для начинающего дизайнера]

Урок 1 — Базовые знания по типографике 1/3 [Типографика] [курс для начинающего дизайнера]

31.08.2020
О процессе подачи заявки на программу FLEX Program 2021-2022

О процессе подачи заявки на программу FLEX Program 2021-2022