Место для вас

Flexbox: изучаем играючи

Каждый матерый верстальщик знает, как "версталось" много лет тому назад. Что приходилось выдумывать, на какие извращения в коде приходилось идти, чтоб сайт отображалался везде, ну или хотя бы почти везде, одинаково.

А потом появились широкоформатные мониторы, смартфоны и таблетки...

проблема с версткой

Требований (и гемора) к верстальщику возрасло, но и с этим появились инструменты, которые начали упрощать жить. Это я про css фреимворки и js скрипты. Но давайте по честному - это все те же хаки, но только красиво оформленны.

Спецификация CSS Flexible Box Layout Module (или попросту Flexbox) призвана кардинально изменить сложившуюся ситуацию в лучшую сторону.

Flexbox - это новый, но пока не утвержденный, как стандарт, способ располагать блоки на странице. С помощью Flexbox можно легко выравнивать элементы, как по горизонтали, так и по вертикали; менять их направление и порядок отображение элементов; растягивать блоки на всю высоту родительского блока или прижимать их к нижнему краю.

Так как Flexbox на данный момент всего лишь W3C Candidate Recommendation и поддержка этой возможности браузерами пока неполная, то использовать возможности Flexbox на реальных проектах не рекомендуется. Хотя последние версии популярных браузеров уже имеют поддержку Flexbox. Но IE и остальные старые версии браузеров "портят малину".

Короче, чтоб было ясно:
- если пилить сайт для мониторов, то пока юзать Flexbox не рекомендуется.
- если пилить сайт конкретно для мобильников или таблеток, то юзать Flexbox можно, а некоторые говорят, что НУЖНО.

Но время не стоит на месте, так что любому верстальщику или тому, кто сталкивается с версткой, рано или поздно придется столкнуться с FLEXBOX. Этого не избежать, как не получилось избежать HTML5 и CSS3. Да и зачем? Flexbox - это будущее. Так что его НУЖНО знать, чтоб понимать ГДЕ и КОГДА использовать. Да и синтаксис очень легкий и интуитивно понятный. Не вижу оснований, чтоб его обойти стороной.

А что лучше всего подходит для изучения? Правильно. ИГРА с практическими применениями. Ну как в детстве.

Для изучения FLEXBOX придумали классную игру Flexbox Froggy, где вам на протяжении 24 уровней нужно помочь лягушонку Фроги и его друзьям с написанием CSS кода, используя FlexBox!

Игруха реально классная. Мини квест.

УДАЧКИ

PS: если вы знаете еще какие-то сервисы по изучению чего-то в игровой форме, как flexboxfroggy.com, то пишите в коментах.


Место для вас

Добавить коментарий

кликните на картинку,
чтоб обновить код

Что за сайт

Этот сайт представляет унифицированную базу, где инфа собрана в единое целое, а не разбросанна по многочисленным сайтам, записям на листах бумаги или головам людей; а так же доступна круглосуточно не зависимо от кого-либо или чего-либо.

Будь в курсе

Интересненько

Вверх