История флексбокс (-moz-box, -ms-flexbox, -webkit-flex)

Флексбокс (Flexbox)... Немало статей написано о том, как его использовать, что он из себя представляет. Думаю, каждый фронтенд-разработчик на этом собаку съел. Сложно представить, что было бы, если до сих пор верстали макеты на float, inline-block и table. Ведь их предназначение совсем в другом. К счастью, технологии не стают на месте и с каждым днем появляется что-то новое, которое упрощает процесс разработки. Одним из них был flexbox, который дал нам инструмент для создания сложных, гибких макетов, и функции, которые были сложны в традиционных методах CSS.

Давайте, разберемся с чего все началось. Итак, поехали!

Примерно в 2000-х годах Mozilla внедрила себе XUL, чтобы упростить и ускорить разработку своих приложений, как Firefox. Это был язык разметки для создания динамических пользовательских интерфейсов на основе XML, разработанная компанией Netscape в 1997 году. Пример интерфейсов можно посмотреть тут (открывать в браузере Firefox или любом другом браузере на движке Gecko). В XUL была представлена "блочная модель" (The Box Model), которая обеспечила значительную гибкость в дизайне интерфейсов. Она позволила располагать, помещать и позиционировать элементы так, как мы хотим. Модель определила:

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

Где-то до 2008 года CSS Working Group обсуждала идею гибкой блочной модели на основе XUL и XAML. В 2009 году Mozilla предложила добавить свою систему в CSS. На тот момент (с 2006 года), часть ее свойств (box-orient, box-direction, box-align, box-flex, box-pack) уже экспериментально (как расширение для стандарта CSS) были внедрены в Firefox 2.0 c префиксом -moz-. 23 июля 2009 года W3C опубликовала первый рабочий черновик “Flexible Box Layout Module”, который значительно отличался от текущей спецификации. Чтобы создать flex-контейнер, нужно было использовать display: box и несколько box-* свойств (orient, flex, align, direction,flex-group, lines, ordinal-group, pack), которые частично делали то, что сегодня предлагает нам flexbox. Предложенный синтаксис поддерживается в Firefox 2-21 (-moz-), частично в Safari 3.1-6 (-webkit-), Chrome 4-21 (-webkit-), iOS 3.2-6.1 (-webkit-), Android 2.1-4.3 (-webkit-).

Реализация модуля в разных браузерах была неполным и слега различалась, алгоритм компоновки был медленным. В 2011 году пришел Таб Эткинс (Tab Atkins) и полностью переписал спецификацию: display: box заменили на display: flexbox. После нескольких поправок, в марте 2012 года был предложен новый рабочий черновик, который разделил и объединил некоторые свойства модуля. Все, что начиналось на box-* было заменено на flex-*. Этот синтаксис поддерживается в IE 10, с использованием префикса -ms-.

В сентябре 2012 года публикуется очередная спецификация со статусом Candidate Recommendation. В новом синтаксисе теперь flex-контейнер создается с помощью display: flex. Поддерживается в Chrome 21-28 (-webkit-), Chrome 29+, Firefox 22-27 (-moz-), Firefox 28+, Opera 17+, в Safari 6-8 (-webkit-), Safari 9+, IE11+, Edge 12+, Android 4.4+, iOS 7-8.4 (-webkit-), iOS 9.2+.

На сегодняшний день браузеры отлично поддерживают флексбокс без всяких префиксов. В 2015 году Safari последним из основных браузеров избавился от префиксов, после релиза Safari 9. Большинство проблем с флексбокс связана с изменениями спецификации по мере ее разработки. Многие пытались использовать экспериментальные варианты в производстве. Поэтому, при использовании autoprefixer от Андрея Ситника, в вашем CSS коде появляются странные свойства как -moz-box, -ms-flexbox, -webkit-flex, чтоб хоть как-то дать шанс flexbox показать себя.