Горизонтальное меню. Как выровнять горизонтальное меню по центру
В этом уроке мы будем создавать горизонтальное меню на CSS . Конечно, можно изпользовать уже готовые решения, к примеру, нанять программистов для CMS Made Simple . Однако, вы же не ищете легких путей? :bully:
Шаг 1 - HTML разметка
Для начала необходимо создать элементы списка с тегом для каждого элемента нашего горизонтального меню. Чтобы создать подменю необходимо добавить еще один дочерний список внутри родительского.
Шаг 2 - Создание CSS стилей для горизонтального меню
Изначально меню выглядит вертикально, чтобы это исправить пропишем некоторые стили, отредактируем отступы, границы, цвет фона, закруглим углы. Ширину и высоту сделаем фиксированную. Выравнивание элементов меню сделаем по левому краю при помощи float: left (чтобы навигация приобрела горизонтальную структуру).
Menu, .menu ul, .menu li, .menu a { margin: 0; padding: 0; border: none; outline: none; } .menu { height: 40px; width: 505px; background: #4c4e5a; background: -webkit-linear-gradient(top, #5c5e6a 0%,#3c3d44 100%); background: -moz-linear-gradient(top, #5c5e6a 0%,#3c3d44 100%); background: -o-linear-gradient(top, #5c5e6a 0%,#3c3d44 100%); background: -ms-linear-gradient(top, #5c5e6a 0%,#3c3d44 100%); background: linear-gradient(top, #5c5e6a 0%,#3c3d44 100%); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .menu li { position: relative; list-style: none; float: left; display: block; height: 40px; }
Пропишем на некоторое время следующий стиль, скрывающий выпадающий список. Так будет легче редактировать.
Шаг 3 - Стиль ссылочного меню
Далее пропишем стили, добавляющие некоторые основные свойства CSS такие, как тип шрифта, цвета, отступы и т.д. Затем добавим тень для текста и цветовые переходы, чтобы создать гладкий эффект, когда цвет изменяет не мгновенно, а с некоторым интервалом. Для создания сепаратора ссылки добавим границу слева и справа, а затем удалим левую границу в первой ссылке и правую границу в последней ссылке. При наведении на меню изменяться будет только цвет.
Menu li a { display: block; padding: 0 14px; margin: 6px 0; line-height: 28px; text-decoration: none; border-left: 1px solid #494942; border-right: 1px solid #4f5058; font-family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 13px; color: #f4f4f4; text-shadow: 1px 1px 1px rgba(0,0,0,.6); -webkit-transition: color .3s ease-in-out; -moz-transition: color .3s ease-in-out; -o-transition: color .3s ease-in-out; -ms-transition: color .3s ease-in-out; transition: color .3s ease-in-out; } .menu li:first-child a { border-left: none; } .menu li:last-child a{ border-right: none; } .menu li:hover > a { color: #9fde63; }
Шаг 4 - Выпадающее меню
Прежде всего, давайте удалим эту строку кода, которую мы добавили на втором шаге.
Menu ul { display: none; }
Теперь будем редактировать стиль для подменю. Добавим позиционирование подменю 40px сверху и 0px слева от пункта меню и добавим закругленные углы снизу. Установим нулевую прозрачность, а при наведении изменим ее на 1, чтобы создать усиление / затухания эффекта. Для слайд-эффекта вверх / вниз мы должны задать высоту списка равную 0px, когда выпадающее меню скрыто, и 36px при наведении курсора на раскрывающийся список.
Menu ul { position: absolute; top: 40px; left: 0; opacity: 0; background: #2f3035; -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; -webkit-transition: opacity .3s ease .1s; -moz-transition: opacity .3s ease .1s; -o-transition: opacity .3s ease .1s; -ms-transition: opacity .3s ease .1s; transition: opacity .3s ease .1s; } .menu li:hover > ul { opacity: 1; } .menu ul li { height: 0; overflow: hidden; padding: 0; -webkit-transition: height .3s ease .1s; -moz-transition: height .3s ease .1s; -o-transition: height .3s ease .1s; -ms-transition: height .3s ease .1s; transition: height .3s ease .1s; } .menu li:hover > ul li { height: 36px; overflow: visible; padding: 0; }
Ширину кликабельного выпадающего меню установим - 100px. После каждой ссылки добавил границу, чтобы разделить их. Границу в последней ссылке удалим.
Menu ul li a { width: 100px; padding: 4px 0 4px 40px; margin: 0; border: none; border-bottom: 1px solid #464649; } .menu ul li:last-child a { border: none; }
Чтобы закончить горизонтальное меню на CSS нужно добавить иконку для каждого выпадающего подменю. Для этого мы создадим собственный класс для каждого из подменю и добавим фоновое изображение.
Menu a.d { background: url(docs.png) no-repeat 6px center; } .menu a.m { background: url(bubble.png) no-repeat 6px center; } .menu a.s { background: url(arrow.png) no-repeat 6px center; }
Заключение
Мы успешно создали выпадающее горизонтальное меню с применением CSS3 стилей и без применения , хотя его тоже можно было . Если у вас возникли вопросы, дайте мне знать об этом в комментариях.
(cкачиваний: 395)
Создадим простое горизонтальное меню навигации для сайта. Для этого будем пользоваться простыми приемами, которые в результате дадут корректное отображение нашего меню во всех браузерах.
Итак начнем. Создадим список с названиями нашего меню. В качестве названий пунктов пусть будут такие: "Главная", "Новости", "Продукция", "Услуги", "Партнеры", "Контакты". Создаем новый файл под названием menu.html , например, с помощью программы Dreamweawer или используя обычный блокнот. В нем между тегами body размещаем наше меню. Это обычный маркированный список ul с элементами li . Разумеется, каждый пункт меню делаем ссылкой, где вместо URL вставляем решетку #. Используя программу Photoshop создадим изображение размером 3х30 px, с градиентной заливкой как показано на рисунке ниже. Файл сохраним в формате GIF. Назовем его bg.gif . Данный рисунок будет выступать в качестве фонового изображения нашего меню.
Вот содержимое файла menu.html :
- Главная
- Новости
- Продукция
- Услуги
- Партнеры
- Контакты
Теперь отдельно создадим файл стилей под названием main.css . Его листинг приведен полностью ниже.
Ul { margin:0; /*обнуляем отступы*/ padding:0; /*обнуляем отступы*/ float:left; /*выравниваем список по левому краю*/ width:auto;/*задаем ширину авто исходя из типа и содержимого списка*/ background-image: url(bg.gif); /*устанавливаем фоновое изображение*/ background-repeat:repeat-x; /*повторяем наше изображение по горизонтали*/ list-style:none; /*удаляем маркеры списка*/ background-color:#4778c3; /*задаем цвет фона под изображение*/ font-size:13px; /*задаем размер шрифта*/ font-family:Arial, Helvetica, sans-serif; /*устанавливаем шрифт*/ } ul li { float:left; /*выравниваем элементы списка по левому краю*/ } ul a { display:block; /*представляем ссылки меню как блочные элементы*/ width:100px; /*задаем размер блока*/ height:30px; /*и высоту блока*/ text-align:center; /*надпись по центру*/ line-height: 2.1em; /*межстрочный интервал*/ text-decoration:none; /*убираем подчеркивание у ссылок*/ color:#fff; /*цвет текста ссылок - белый*/ border-right:#fff solid 1px; /*бордюр правой стороны блока (белая линия в 1px)*/ } ul a:hover { color:#ccc; /*ссылка меняет цвет при наведении указателя*/ }
Думаю, что по содержимому файла main.css вопросов возникнуть не должно, подсказки в комментариях я написал достаточно подробно и ясно, поэтому повторяться не буду. Не забываем его подключить к нашей странице menu.html с помощью
Подведем итог. В результате мы получили полностью кросбраузерное горизонтальное меню, которое выглядит одинаково не только во всех современных браузерах, но и в таких раритетах, как IE 5.5 и IE 6.0. Все элементы меню представлены как блочные элементы и имеют одинаковые размеры по ширине 100 px и высоте 30px. В качестве разделителя пунктов меню используется оформление блокового элемента с помощью правого бордера белого цвета толщиной в 1px. Это практически самый простой способ реализации горизонтального меню. Разумеется, при желании его можно модифицировать, сделать более красивым и функциональным используя фантазию, свойства css и дополнительные графические элементы. Ну а наше горизонтальное меню выглядит примерно так:
Плюсы этого решения:
Простота выполнения
Простой код
Нет никаких таблиц и javascript
Кроссбраузерность: меню во всех браузерах выглядит одинаково
Используются всего один рисунок
Минимум кода на странице menu.html
Минимум кода для реализации стилей в main.css
Файлы, используемые в данном примере, можно скачать в архиве
Хабр, привет!
На Сodepen появляется много хороших решений от разных специалистов, и я считаю, что лучшие из них нужно собирать в одном месте. Поэтому 2 года назад начал сохранять у себя на компьютере интересные скрипты по разным тематикам.
Раньше я их выкладывал в группе продукта облачной IDE mr. Gefest , это были сборки из 5-8 решений. Но теперь у меня стало скапливаться по 15-30 скриптов в разных тематиках (кнопки, меню, подсказки и так далее).
Такие большие наборы следует показывать большему числу специалистов. Поэтому выкладываю их на Хабр. Надеюсь они будут Вам полезны.
В этом обзоре мы рассмотрим многоуровневые меню.
Flat Horizontal Navigation
Красивая навигационная панель с плавно появляющимся подменю. Код хорошо структурирован, используется js. Судя по использованным возможностям, работает в ie8+.
http://codepen.io/andytran/pen/kmAEy
Material Nav Header w/ Aligned Dropdowns
Адаптивная панель ссылок с двухколонным подменю. Все сделано на css и html. Применены css3 селекторы, которые не поддерживаются в ie8.
http://codepen.io/colewaldrip/pen/KpRwgQ
Smooth Accordion Dropdown Menu
Стильное вертикальное меню с плавно раскрывающимися элементами. Используется transition, transform js-код.
http://codepen.io/fainder/pen/AydHJ
Pure CSS Dark Inline Navigation Menu
Темная вертикальная навигационная панель с иконками из ionicons. Применяется javascript. В ie8 скорее всего будет работать без анимации.
http://codepen.io/3lv3n_snip3r/pen/XbddOO
Pure CSS3 Mega Dropdown Menu With Animation
Стильное меню с двумя форматами вывода: горизонтальным и вертикальным. Используются иконки и css3-анимация. В ie8 точно будет ужасно выглядеть, но зато в других браузерах все круто.
Ссылка на вертикальную: http://codepen.io/rizky_k_r/full/sqcAn/
Ссылка на горизонтальную: http://codepen.io/rizky_k_r/pen/xFjqs
CSS3 Dropdown Menu
Горизонтальное меню с большими элементами и выпадающим списком ссылок. Чистый и минималистичный код без js.
http://codepen.io/ojbravo/pen/tIacg
Simple Pure CSS Dropdown Menu
Простое, но стильное горизонтальное меню. Используется font-awesome. Все работает на css и html, без js. В ie8 будет работать.
http://codepen.io/Responsive/pen/raNrEW
Bootstrap 3 mega-dropdown menu
Отличное решение для интернет-магазинов. Отображает несколько уровней категорий и большие изображения (например, товар по акции). В его основе лежит boostrap 3.
http://codepen.io/organizedchaos/full/rwlhd/
Flat Navigation
Стильная навигационная панель с плавным подменю. В старых браузерах отобразится с проблемами.
http://codepen.io/andytran/pen/YPvQQN
3D nested navigation
Горизонтальное меню с очень крутой анимацией без js!
http://codepen.io/devilishalchemist/pen/wBGVor
Responsive Mega Menu - Navigation
Горизонтальное адаптивное меню. Выглядит неплохо, но мобильная версия немного "хромает". Используется css, html и js.
http://codepen.io/samiralley/pen/xvFdc
Pure Css3 Menu
Оригинальное меню. С простым и чистым кодом без js. Применяйте для "вау" эффектов.
http://codepen.io/Sonick/pen/xJagi
Full CSS3 Dropdown Menu
Красочное выпадающее меню с одним уровнем вложенности. Используются иконки из font-awesome, html и css.
http://codepen.io/daniesy/pen/pfxFi
Css3 only dropdown menu
Достаточно неплохое горизонтальное меню с тремя уровнями вложенности. Работает без js.
http://codepen.io/riogrande/pen/ahBrb
Dropdown Menus
Минималистичное меню с оригинальным эффектом появления вложенного списка элементов. Радует, что это решение тоже без javascript.
http://codepen.io/kkrueger/pen/qfoLa
Pure CSS DropDown Menu
Примитивное, но эффективное решение. Только css и html.
http://codepen.io/andornagy/pen/xhiJH
Pull Menu - Menu Interaction Concept
Интересный концепт меню для мобильного телефона. Я такого ещё не видел. Используется html, css и javascript.
http://codepen.io/fbrz/pen/bNdMwZ
Make Simple Dropdown Menu
Чистый и простой код, без js. В ie8 точно работать будет.
http://codepen.io/nyekrip/pen/pJoYgb
Pure CSS dropdown
Решение неплохое, но слишком уж много используется классов. Радует, что нет js.
http://codepen.io/jonathlee/pen/mJMzgR
Dropdown Menu
Симпатичное вертикальное меню с минимальным javascript-кодом. JQuery не используется!
http://codepen.io/MeredithU/pen/GAinq
CSS 3 Dropdown Menu
Горизонтальное меню с дополнительными подписями может хорошо украсить Ваш сайт. Код простой и понятный. Javascript не применяется.
http://codepen.io/ibeeback/pen/qdEZjR
Красивое решение с большим количеством кода (html, css и js). Придумано 3 формата подменю. Для интернет-магазинов решение хорошо подходит.
http://codepen.io/martinridgway/pen/KVdKQJ
CSS3 Menu Dropdowns (особенное решение)!
Темное горизонтальное меню с тринадцатью (13) вариантами анимации! Обязательно советую ознакомиться, пригодится в быту.
http://codepen.io/cmcg/pen/ofFiz
П.С.
Надеюсь, Вам понравилась сборка из 23 решений. Если хотите и дальше их читать, то пройдите снизу опрос.
Всем приятной работы.
Задача
Сделать горизонтальное меню, пункты которого имеют произвольный наклон (рис. 1).
Рис. 1. Вид меню с наклонными пунктами
Решение
За трансформацию элемента отвечает стилевое свойство transform , в качестве его значения используется функция skewX , которая и задаёт нужный наклон. Угол наклона проще устанавливать в градусах, к примеру, 30deg - это 30º от вертикали. Трансформация действует и на все дочерние элементы, поэтому текст внутри элемента также будет наклонён, что не лучшим образом отражается на его читабельности и красоте. Поэтому к тексту важно ещё раз применить наклон, но уже в другую сторону, для этого достаточно просто поменять знак перед значением градусов.
Браузеры поддерживают свойство transform преимущественно со своими префиксами, так что для универсальности в стилях следует повторить его несколько раз с одним и тем же значением, добавляя -moz- для Firefox, -webkit- для Safari и Chrome, -o- для Opera и -ms- для браузера Internet Explorer как показано в примере 1.
Пример 1. Наклон пункта меню
HTML5 CSS3 IE Cr Op Sa Fx
- Джокер
- Пазузу
- Палпатин
- Доктор Дум
В данном примере горизонтальное меню создаётся с помощью маркированного списка. Чтобы список был именно горизонтальным, в стилях к элементу li добавляется свойство display со значением inline-block . Для наклона применяется свойство transform с функцией skewX и значением -30º. К ссылкам внутри списка также применяется это свойство, но уже с положительным значением 30º, это обеспечивает правильное, а не наклонное отображение букв.
Браузеры Chrome, Safari и Firefox используют свойство transform для блочных или строчно-блочных элементов, поэтому для ссылок задано свойство display со значением block .
Здравствуйте уважаемые посетители моего блога! Сегодня речь пойдет о главном горизонтальном меню сайта, а именно как выровнять горизонтальное меню по центру. Да, на первый взгляд, что тут сложного — задал нужные отступы, подогнал и все. Но тут есть свои нюансы. Сайт, в первую очередь, это динамика, т.е. на сайте постоянно появляется новый контент, появляются какие то новые блоки с информацией и т.п. Так могут и появляться/исчезать некоторые пункты в главном меню. С учетом этого всего нужно добиться того, что при добавлении или удалении пункта меню, меню у нас остается все также по центру. Конечно, не всегда обязательно его центрировать, все зависит от дизайна. Но если все же у вас подразумевается ставить горизонтальное меню по центру, то применив несколько несложных трюков в css мы можем добиться нужного результата.
Структура статьи
Горизонтальное меню по центру без выпадающих пунктов
Сначала разберем на примере горизонтального меню, которое не имеет выпадающих пунктов.
Html-код
Css-код
*, *::after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } #mainmenu { background: #444; position: relative; overflow: hidden; height: 40px; margin: 30px 0 } #mainmenu ul { list-style: none; margin: 0; padding: 0; position: relative; left: 50%; float: left; font: 14px Arial, Helvetica, sans-serif; height: 40px } #mainmenu ul li { position: relative; left: -50%; float: left; margin: 0 10px; height: 40px } #mainmenu ul li a { color: #fff; display: block; text-decoration: none; padding: 0 15px; line-height: 40px; } #mainmenu ul li a:hover { background-color: #666; }Разберем все по порядку, здесь все просто. Мы создаем контейнер «mainmenu», куда помещаем наше меню в виде неупорядоченного списка.
Теперь дело идет за стилями css. Сначала мы сбрасываем на ноль все поля и отступы для всех браузеров. Далее при помощи свойства «float:left» мы смещаем наш неупорядоченный список влево и далее относительным позиционированием смещаем его на 50% вправо. Ширина списка «ul» будет равна сумме длин всех пунктов «li», которые находятся внутри него. Таким образом, если мы мысленно поделим окно браузера пополам, то наше меню уйдет вправо от линии разделения. Чтобы выровнять мы применим к пунктам «li» также относительное позиционирование и сместим их влево на 50%, указав свойство «left:-50%». Да и еще, чуть не забыл, нашему контейнеру «mainmenu» нужно обязательно указать свойство «overflow:hidden» , иначе мы получим горизонтальную полосу прокрутки.
Вот и все, теперь наше меню выровнялось по центру. Теперь можете добавлять, хоть убавлять пункты, на позиционирование это не повлияет. Вы также можете использовать это меню на своих сайтах, просто изменив стили под ваш дизайн.
Горизонтальное меню по центру с выпадающими пунктами
Теперь разберем с выпадающими подпунктами. Здесь ситуация несколько иначе и несколько сложнее, т.к. в первом случае у нас подпункты выпадать не будут, потому что мы указали блоку «mainmenu» свойство — «overflow:hidden». Это говорит, что элементы за пределами данного блока показываться не будут. Но выход есть.
Итак, я изменил предыдущий код и удалил из него свойство «overflow:hidden».
Html-код
CSS-код
*, *::after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } #mainmenu { position: relative; background: #444444; height: 40px; margin: 30px 0; padding: 0; float: left; width: 100%; z-index: 10 } #mainmenu ul { clear: left; position: relative; right: 50%; height: 40px; float: right; text-align: center; font: 15px Arial, Helvetica, sans-serif; list-style: none; padding: 0; margin: 0 } /** Основные пункты **/ #mainmenu > ul > li { position: relative; left: 50%; float: left; height: 40px; padding: 0; margin: 0 } #mainmenu > ul > li > a { border-left: 1px solid #666; display: block; color: #fff; text-decoration: none; padding: 0 20px; line-height: 40px; } #mainmenu > ul > li:first-child > a { border: none } #mainmenu > ul > li:hover > a, #mainmenu > ul > li.hover > a, #mainmenu > ul > li.active > a { color: #fff } #mainmenu > ul > li:hover, #mainmenu > ul > li.hover, #mainmenu > ul > li.active { background: #666 } /* Выпадающие подпункты */ #mainmenu ul li ul { position: absolute; left: 0; top: 40px; display: none; list-style: none; visibility: hidden; padding: 0; margin: 0; width: 200px } #mainmenu > ul > li ul li { background-color: #666; position: relative; left: 0; display: list-item; float: none; height: auto; margin: 0; text-align: left; } #mainmenu ul li ul li a { border-bottom: 1px solid #999; display: block; color: #fff; padding: 10px 15px; text-decoration: none; } #mainmenu ul li ul li.parent a { position: relative; } #mainmenu ul li ul > li.parent > a::before { border-top: 1px solid #fff; border-right: 1px solid #fff; content: ""; display: block; position: absolute; right: 15px; top: 50%; transform: translateY(-50%) rotate(45deg); height: 6px; width: 6px; } #mainmenu ul li ul li:hover, #mainmenu ul li ul li.hover { background-color: #444 } #mainmenu ul li:hover ul, #mainmenu ul li.hover ul { display: block } /* Выпадающие пункты второго уровня */ #mainmenu ul li:hover > ul { opacity: 1; visibility: visible; margin: 0; } #mainmenu ul li ul li ul { top: 0; left: 200px; margin: 0 0 0 20px; width: 180px }Теперь у нас меню выставлено по центру и при наведении выпадают подпункты.
Выравнивание меню по центру с помощью flexbox
Выровнять меню по центру можно также, применив новое правило в css - flexbox. Вообще трюкам с flexbox я хочу посвятить отдельный пост, оно того стоит, очень упрощает жизнь верстальщику. В общем, здесь не будем углубляться… Я приведу здесь только код css для меню с выпадающими пунктами. HTML код тот же, что и выше.
Код CSS
*, *::after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } #mainmenu { position: relative; background: #444444; height: 40px; margin: 30px 0; padding: 0; width: 100%; z-index: 10 } #mainmenu ul { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; height: 40px; text-align: center; font: 15px Arial, Helvetica, sans-serif; list-style: none; padding: 0; margin: 0; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } /** Основные пункты **/ #mainmenu > ul > li { position: relative; height: 40px; padding: 0; margin: 0 } #mainmenu > ul > li > a { border-left: 1px solid #666; display: block; color: #fff; text-decoration: none; padding: 0 20px; line-height: 40px; } #mainmenu > ul > li:first-child > a { border: none } #mainmenu > ul > li:hover > a, #mainmenu > ul > li.hover > a, #mainmenu > ul > li.active > a { color: #fff } #mainmenu > ul > li:hover, #mainmenu > ul > li.hover, #mainmenu > ul > li.active { background: #666 } /* Выпадающие подпункты */ #mainmenu ul li ul { position: absolute; left: 0; top: 40px; display: none; list-style: none; visibility: hidden; padding: 0; margin: 0; width: 200px } #mainmenu > ul > li ul li { background-color: #666; position: relative; left: 0; display: list-item; float: none; height: auto; margin: 0; text-align: left; } #mainmenu ul li ul li a { border-bottom: 1px solid #999; display: block; color: #fff; padding: 10px 15px; text-decoration: none; } #mainmenu ul li ul li.parent a { position: relative; } #mainmenu ul li ul > li.parent > a::before { border-top: 1px solid #fff; border-right: 1px solid #fff; content: ""; display: block; position: absolute; right: 15px; top: 50%; transform: translateY(-50%) rotate(45deg); height: 6px; width: 6px; } #mainmenu ul li ul li:hover, #mainmenu ul li ul li.hover { background-color: #444 } #mainmenu ul li:hover ul, #mainmenu ul li.hover ul { display: block } /* Выпадающие пункты второго уровня */ #mainmenu ul li:hover > ul { opacity: 1; visibility: visible; margin: 0; } #mainmenu ul li ul li ul { top: 0; left: 200px; margin: 0 0 0 20px; width: 180px }Как видим, изменились правила только для родительского списка - #mainmenu ul. Единственное, пришлось добавить префиксы для предыдущих версий браузеров. Отмечу, что правило flexbox корректно понимают только современные браузеры. Если вы ориентируетесь на более старые браузеры, то вариант с flex’ом придется отложить. Какие именно браузеры хорошо понимают flexbox можете посмотреть
