Кому нужен флекс, если они не делают сайты?Да, 12% сайтов уже используют flex. И они нужны нам всем, чтобы сделать планировку более удобной.
Flex, или Flexible Box Layout, с нами с 2006 года.
Оказывается, уже одиннадцать лет! Затем они были внедрены в Mozilla для создания интерфейсов Firefox. Представьте, что вы настраиваете панель браузера: кнопки проходят по краям, отталкиваются и стоят ровно по горизонтали.
Настоящий флексбокс.
В 2009 году Mozilla предложила добавить эту систему в CSS. С тех пор многое произошло: тот самый первый флекс появился в Safari и других браузерах на WebKit. Вторая версия появилась в IE 10 в 2012 году.
Flexbox в его нынешнем виде, с flex-wrap, стал широко поддерживаться в 2014 году с выпуском Firefox 28. Сейчас почти 98% браузеров по всему миру поддерживают хотя бы ту или иную версию Flexbox. .
Даже Opera Mini, на последнем издыхании движка Presto, научилась гибкости.
Зачем они вообще нужны? Это первая система компоновки CSS, которая не является хаком.
Таблицы, числа с плавающей запятой и встроенные блоки были изобретены совершенно для другой цели.
Приведите три простых примера.
Колонки одинаковой резиновой высоты: одна растёт по содержанию, остальные следуют за ней, несмотря ни на что.
Или горизонтальный блок, элементы внутри распределены равномерно, сколько бы их ни было.
Либо блок произвольных размеров внутри родителя — ровно по центру.
Знаю, знаю – все это можно имитировать десятком способов.
CSS очень гибок и помимо плавающих элементов, встроенных блоков и свойств таблиц вы можете использовать хитрое позиционирование.
Я сам подражал этому много лет и освоил лайфхаки и трюки.
Но только flex делает это по-настоящему простым и очевидным способом.
Что это вообще такое? Flex — это контекст форматирования: вы даете родительский дисплей: flex и его дочерние элементы начинают вести себя подозрительно хорошо..center { position: absolute; top: 50%; left: 50%; transform: translate( -50%, -50% ); }
Есть и старое отображение контекста: таблица, когда блоки притворяются внутренностями таблицы, и совершенно новое — сетка, даже круче, чем флекс.
Сетки и флексы имеют нечто общее, что очень ценно.
Недостаточно разбрасывать резиновые блоки; это можно сделать даже на поплавках.
Также необходимо сказать, где они начинаются по главной оси, как делят пустое пространство внутри родителя и как выравниваются поперек оси — во флексах можно менять ее направление.
Эти вопросы рассматриваются в отдельной спецификации Box Alignment. .
flex {
display: flex;
justify-content:
space-between;
align-items:
stretch;
flex-direction:
column;
}
Flex и Grid включают в себя Box Alignment для своих дочерних элементов, и это то, чего нам всем очень не хватало.
Когда-нибудь свойства justify-content, align-self, justify-items и другие будут работать в других контекстах.
Ведь самый популярный вопрос о верстке по-прежнему — как выровнять блок по вертикали.
Проще всего это сделать с помощью флексов.
Ладно, флексы классные, дай мне два.
Но почему тогда главные студии страны делают сайты для главных компаний страны, где всё ещё висит? А для надежности иногда даже по таблицам.
Тут два варианта: либо им нужна поддержка IE 9, либо там работают упорные староверы.
У них на поплавках все работает, зачем что-то менять? Давайте оставим консервативных программистов в покое и займемся поддержкой браузеров.
Если вам нужен старый Android 4.3, iOS 6 или Firefox 27, то флексы у вас будут только в одну строку, без дефисов: там пока flex-wrap не работает. Не получится составить удобный список карточек одной высоты, которые переносятся друг за другом по линиям.
Старый WebKit и очень старый Firefox 21 поддерживают версию Flexbox 2009 года с немного другим синтаксисом, за префиксами -webkit и -moz. В IE 10 и 11 синтаксис ближе к современному и поддерживает дефисы, но с префиксом -ms. Если вы напишете современный флекс, а потом расставите префиксы с помощью Autoprefixer, то он добавит вам старые свойства, чтобы всё работало как надо.
Но волшебства нет: переносы не будут работать и баги не исчезнут. .
flex {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
О багах отдельно: в старых реализациях с префиксами в Firefox, Safari и IE очень много ошибок.
Но все они более или менее описаны в сборнике Flexbugs Филипа Уолтона.
В первую очередь нужно определиться с браузерами, которые вы поддерживаете и может быть вместо старых флексов с префиксами просто дать им float? Да, это самое приятное: вы можете сделать простой макет с плавающей запятой или в контексте таблицы, а затем объявить display: flex и сделать его еще лучше для браузеров, которые могут гибко работать.
Веб-сайты не должны выглядеть одинаково во всех браузерах, независимо от требований клиентов.
Особенно в старых, где основная задача — сохранить доступный контент. Плавающие элементы были изобретены для того, чтобы текст мог обтекать изображение, и нашему макету давно пора перестать где-то плавать.
Мы в Академии уже перевели программы базовый И передовой интенсивные курсы по гибкой верстке — и мы вам рекомендуем.
Это уже возможно.
Видео версия
Вопросы можно задавать Здесь .Теги: #Разработка сайтов #CSS #HTML #html5 #верстка #для начинающих #css3 #для начинающих #flexbox #flex #flexbox #веб-верстка
-
Re: Скидка В Магазине
19 Oct, 24 -
А У Нас Всё Как Всегда
19 Oct, 24
