Flexbox css разметка, используем сетки с гибкой настройкой!

Ни для кого не секрет, что CSS Flexible Box Model изобретена уже довольно давно, но за последние пару лет синтаксис претерпел существенные изменения, причем несколько раз. Из-за этого поддержку браузеров тоже нельзя назвать идеальной. Но сегодня мы свами попробуем собрать все воедино. Скажу сразу: поддерживаются все версии Chrome, Safari, Firefox, iOS, Android, а также Opera версии 12.1 и выше. С Internet Explorer хуже — только 10 версия. Поэтому, если хотите использовать такую модель в продакшне — придется использовать отдельную таблицу css для IE 9 и ниже (хотя это конечно же вполне распространенная практика).