Flex свойства (grow, shrink, basis) | CSS для Профи

preview_player
Показать описание
ПОДДЕРЖАТЬ АВТОРА И КАНАЛ:

Webmoney:
Z166344793421
R369744777501
U871336351200

Телеграмм чат:

Как правило, flexbox-верстку начинают с уже озвученных шагов:
1. Идентифицировать контейнер и содержащиеся в нем элементы, применить свойство display: flex для контейнера.
2. При необходимости установить для контейнера свойство flex-direction.
3. Если нужно, объявить поля и/или значения flex для управления размерами элементов.

МАТЕРИАЛЫ УРОКА:

БАЗОВЫЙ КУРС ПО HTML & CSS:
  1. Андрей Андриевский
  2. Верстка
  3. HTML5
  4. CSS
  5. CSS3
  6. программирование
Рекомендации по теме
Flex свойства (grow, 0:18:46

Flex свойства (grow, shrink, basis) | CSS для Профи

flex / flex 0:10:19

flex / flex basis, flex grow и flex-shrink из модуля флексбокс / flexbox уроки...

Flex grow, shrink, 0:08:42

Flex grow, shrink, basis | CSS Flexbox tutorial

flex-basis, flex-grow, flex-shrink. 0:43:31

flex-basis, flex-grow, flex-shrink. flexbox погружение

Compare Flex Grow 0:06:48

Compare Flex Grow and Flex Shrink within a Flexbox Container

Разбираем как работают 0:24:49

Разбираем как работают flex-basis flex-grow flex-shrink

Объяснение работы свойств 0:28:37

Объяснение работы свойств flex basis, flex grow и flex shrink

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

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

Как работает свойство 0:04:47

Как работает свойство flex-grow и flex-shrink в CSS3. Урок 17

Finally understanding Flexbox 0:10:14

Finally understanding Flexbox flex-grow, flex-shrink and flex-basis! - Tutorial 11 of 20 💪

Flexbox Basics: flex-grow, 0:19:54

Flexbox Basics: flex-grow, flex-shrink, flex-basis

How Do Flex-Basis, 0:14:11

How Do Flex-Basis, Flex-Grow, Flex-Shrink Work? | CSS Flexbox

CSS Flexbox - 0:29:34

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

Flexbox, flex-basis, 0:14:01

Flexbox, flex-basis, flex-shrink, flex-grow, flex-wrap

Как работает свойство 0:02:59

Как работает свойство flex-basis в CSS3. Урок 14

Learn Flexbox CSS 0:08:16

Learn Flexbox CSS in 8 minutes

Flexbox flex-grow, flex-shrink 0:14:41

Flexbox flex-grow, flex-shrink y flex-basis

Гайд по Flexbox: 0:23:03

Гайд по Flexbox: основные свойства

Flexbox на примерах 0:07:07

Flexbox на примерах #5 - flex-basis vs width, сокращенное свойство flex

How does flex-grow 0:08:18

How does flex-grow work?

Flexbox - Flex 0:03:34

Flexbox - Flex Basis

Flexbox Tutorial - 0:03:29

Flexbox Tutorial - 15 - Flex basis

38. Flex-shrink CSS 0:08:11

38. Flex-shrink CSS Property in FlexBox & how it behaves with flex-grow & flex-basis propert...

Flexbox | FLEX 0:02:37

Flexbox | FLEX | Короткая форма записи для свойств: flex-grow, flex-shrink и flex-basis...

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

Урок хороший! Автору спасибо за то, что доступным языком донес суть. Единственный момент, который режет ухо — это неправильное произнесение английской терминологии. Кстати, это, к сожалению, «серьезная» болезнь большинства видео-блогеров. Господа учителя, давайте исправим ситуацию! Подтянем свой английский. )))
1. Термин shrink произносится "шринк", а не "шранк"
2. Термин basis произносится "бейсис", а не "бейсик"
Совет: если видишь английское слово и не знаешь как оно правильно произносится, то открой Google-переводчик, введи там это слово и прослушай. Заодно узнаешь и перевод, если до этого не знал.

kotofun
Автор

Читал до этого про свойства flex-shrink и flex-grow, но только после этого видео понял как они работают. Лучше один раз увидеть) Спасибо за доступное объяснение!

richdad
Автор

Кращий, просто. Дякую за пояснення. Матеріал викладений дуже зрозуміло. Велике дякую вам!

brist
Автор

Спасибо, очень понятно объяснил, до этого смотрел другие видео, там только теорию объясняют, благодаря вам понял, как на практике применять!

ulaniskanderov
Автор

Андрей, большое спасибо за старание и труд! Канал -- супер!!!

juijbtb
Автор

Все круто. Английские слова желательно правильно произносить, для собственного развития. Но спасибо за контент!

Chat-Mayevskogo
Автор

круто преподносишь материал! django 2 ждать?

wingrada
Автор

Зачем задавать ширину для боксов в 150 пикселей если в итоге она меняется (уменьшается или увеличивается) при разных значениях флекс гроу?

clayandplay
Автор

Здравствуйте, назрел вопрос.. Вы расписываете полный путь к классу элементов (.flex-row .box-1, но можно ведь написать просто .box-1) чтобы мы лучше усвоили что к чему, или это какое-то негласное правило или так более грамотно?..

wvtrkmh
Автор

не придирайтесь к аглицкому, главное контент отличный!

sergeyshevirev
Автор

Свойство grow боле мене объяснил. А остальные ни фига.

xqhgizz
Автор

а чем flex-basis отличается от min-width?

Woody_Johnson
Автор

Это "флекс-шрайнк" немного бесит. Если человек не считает нужным правильно произносить названия свойств, какого подвоха от него еще ждать? Может, и в остальных местах он пургу несет?

ibmvuwk