CSS Flexbox #8 Размеры элементов (Flexbox Sizing)

preview_player
Показать описание
#YauhenK #webDev #CSS #Flexbox

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

✒ Репозиторий курса:

✒ Полный список готовых и планируемых курсов:

✒ Автор курса:

  1. webDev
  2. web
  3. develop
  4. front-end
  5. frontend
  6. веб
Рекомендации по теме
CSS Flexbox #8 0:05:54

CSS Flexbox #8 Размеры элементов (Flexbox Sizing)

Flexbox CSS практический 0:06:29

Flexbox CSS практический курс за 6 минут. Все свойства

Flexbox #2 Размеры 0:10:33

Flexbox #2 Размеры элементов

CSS Flexbox #9 0:05:32

CSS Flexbox #9 Определение порядка элементов (Order)

CSS Flexbox #10 0:05:56

CSS Flexbox #10 Вложенность. Обёртка элементов с размерами (Nesting. Flex-basis & Flex-wrap)...

Flexbox на CSS 0:11:28

Flexbox на CSS и свойства для работы с флексами, Урок 8

CSS Flexbox #11 0:06:35

CSS Flexbox #11 Практические примеры использования Flexbox (Practical examples)...

CSS Flexbox #3 0:06:40

CSS Flexbox #3 Перенос элементов и отступы (Flex-wrap & Gap)

CSS Flexbox. Полный 0:59:57

CSS Flexbox. Полный курс

#8. Уроки по 0:17:23

#8. Уроки по CSS для НАЧИНАЮЩИХ (Flexbox 2/2)

CSS Flexbox Layout. 0:16:35

CSS Flexbox Layout. Флексы в CSS. Гайд по флексбокс.

CSS Flexbox #5 0:04:35

CSS Flexbox #5 Выравнивание вдоль поперечной оси (Alignment: align-items)...

FlexBox за 20 0:21:33

FlexBox за 20 минут с примерами // Уроки FlexBox // Bootstrap или FlexBox // Flex css...

Flexbox CSS3 в 0:18:53

Flexbox CSS3 в одном уроке за 20 минут, Видео курс по Flexbox CSS

CSS3. Базовый полный 0:22:21

CSS3. Базовый полный курс. Урок 8 - Технологии создания макета. Flexbox...

align-items flexbox css 0:05:50

align-items flexbox css / верстка в флексбокс / flexbox уроки

Flexbox для верстки 0:18:20

Flexbox для верстки #4 (align-items)

CSS Flexbox #7 0:05:02

CSS Flexbox #7 Индивидуальное выравнивание элементов (Alignment: align-self)...

Курс HTML5 и 0:18:48

Курс HTML5 и CSS3. CSS Flexbox

Занятие 8. Flexbox 0:11:51

Занятие 8. Flexbox за 12 минут

CSS. Селекторы, flexbox, 1:00:46

CSS. Селекторы, flexbox, анимации | Лекция 3 | Web-разработка для начинающих...

Сайт на Jekyll. 0:14:45

Сайт на Jekyll. #8 Flexbox header

Flexbox на примерах 0:05:34

Flexbox на примерах #4 - flex-grow, flex-shrink

CSS Flexbox - 0:29:34

CSS Flexbox - Часть 3 - Flex-grow, flex-shrink, flex-basis

Комментарии
Автор

ХОРОШИЙ КОНТЕНТ. ВСЕ ПОНЯТНО ДОСТУПНО БРАТ

lilokino
Автор

супер! по таким урокам изучать - как орешки щелкать!

EugenySubbotin
Автор

4:21 "Ну а самый большой это первый, так как у него flex-shrink - 1".
Но на экране зритель видит не "flexs-shrink: 1", a "flex-grow: 1".

P.S. C меня - указание недостатка, а к автору - просьба о создании отдельного часового видео по флексбоксам(или склейке существующих), но уже с исправлением.

accuso
Автор

По какой формуле рассчитывается пропорциональность, т.к. если в Flex-Grow мы только для 2-го элемента укажем значение 2 то он не будет, ровно, в 2 раза больше остальных элементов а, будет чуть-чуть меньше этого значения хотя, все же будет больше остальных элементов?

Taunfel
Автор

А вот если flex-basis растягивает элементы по оси (гориз. или вертик.), а flex-grow получается растягивает по всем осям?

kirilldegtyarev
Автор

Плохо даётся CSS, даже хуже JS. Вообще не могу запомнить этот толмуд информации, сотни свойств селекторов и их значения (обычно умноденные на несколько раз). Евгений, может есть какие-то самые необходимые темы в css для того чтобы например устроиться в Епам в дальнейшем? Не нравится эта вёрстка но знаю что надо. Всё время хочу уделять обучению js

fellainthewagon