- play_circle_outlineВступление1:30
- play_circle_outlineКак работает Flexbox1:04
- codeСоздание контейнераИнтерактивный
- codeНаправление элементовИнтерактивный
- codeПеренос элементовИнтерактивный
- codeПорядок элементовИнтерактивный
- codeРазмер элементовИнтерактивный
- codeРаспределение элементовИнтерактивный
- codeРасположение элементаИнтерактивный
Для создания макетов очень долгое время использовались такие свойства как display
, float
, position
и др. Если вам приходилось их использовать, то вы согласитесь, что эта не самая легкая и приятная работа, т. к. у этих свойств имеется множество нюансов. И не спроста, ведь эти свойства изначально не предназначались для создания сложных макетов современных веб-страниц и веб-приложений.
В этом курсе вы познакомитесь с Flexbox - модулем CSS, который был разработан для создания гибких макетов.
Используя Flexbox, мы получаем все преимущества традиционных способов позиционирования, но без их недостатков. Мы с легкостью можем изменить размер, направление, порядок элементов, вне зависимости от их изначального размера и порядка в HTML. И наконец-то мы можем без труда разместить элементы по центру, как горизонтально, так и вертикально. И всего этого можно добиться написав всего несколько строк CSS.