Перейти к содержимому



Феноменальная технология flexbox - адаптирует меню автоматически

#1 master-vek

master-vek
  • Пользователь
  • 181 сообщений
  • Репутация: 7
0

Отправлено 15 Апрель 2018 - 21:00

Об этом узнал только тогда, когда начал раздумывать что при меню в двадцать с лишним пунктов возникают проблемы с разрастанием кода в приличных объёмах.  Оказывается технология  flexbox решает эту проблему  в 2-3-4 строки CSS3 файла.

 

Например, необходимо создать меню из 21 позиции и что бы оно перестраивалось под любое расширение экрана.

 

Чаcть кода меню в HTML:

<section>

            <nav>            

                        <ul class="menu">

                        <li><a href="https://servis.kharkov.ua/aeg/" target="blank">AEG</a></li>

                        <li><a href="https://servis.kharkov.ua/ardo/" target="blank">Ardo</a></li>

                        ........................................................................................................................

                        <li><a href="https://servis.kharkov.ua/dnepr/" target="blank">Днепр2</a></li> 

                        </ul>

            </nav>

</section>

Стилевая часть кода:

.menu{           

            display:flex;          /*флекс контейнер*/

            flex-wrap:wrap;    /*строятся  флекс элементы по горизонту параллельными рядами*/

            justify-content:center;   /* флекс элементы становятся по середине горизонта  контейнера */

            align-items: center;    /* флекс элементы  становятся по середине вертикали  контейнера*/

......................................

            } 

Расстояние между элементами меню создаются автоматически равномерно.   При любом расширении монитора происходит перестроение рядов по горизонту и вертикали.  И в заключении как это работает можно посмотреть здесь

 

Мне очень понравилось такое решение. Возможно и изображения  размещать в любом количестве, только медиазапрос  потребуется для уменьшения размера шрифтов при самых малых расширениях. Этой технологии уже три года,  а как то о ней не часто пишут.  Может эта тема новичкам и поможет  ускорить и упростит создание разных меню, фотогалерей и т. д.


 

Просьба к Модератору ссылки в меню сделать не активными. как то не уследил. Или удалить вообще.  Спасибо

 

Сообщение отредактировал BLIK: 15 Апрель 2018 - 22:46
подправил код

  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Как создать мобильную версию сайта
  2. Урок (Viewport)#2 - создание выпадающих меню
  3. Как сделать меню без перезагрузки контента?
  4. Помогите с сертификацией Битрикс
  5. Блок Google Adsense, имитирующий меню сайта

#2 fedornabilkin

fedornabilkin
  • Модератор
  • 1 075 сообщений
  • Репутация: 162

Отправлено 15 Апрель 2018 - 21:24

В bootstrap 4 вроде бы перешли на flex. Там с расположением сетки вообще все супер, много чего предусмотрели и не надо писать своих правил, только названия классов, которые протестированы на разных браузерах.

Насколько я знаю, после flex уже наступил следующий этап - это grid. Я незаметненько отошел от верстки, поэтому давно не отслеживаю, даже flex в подробностях не знаю, только лишь основы.


  • 0

Надо обсудить предложение. А тут знакосчиталка считает знаки. Про Yii2 написано.



#3 master-vek

master-vek
    Topic Starter
  • Пользователь
  • 181 сообщений
  • Репутация: 7

Отправлено 15 Апрель 2018 - 22:02

следующий этап - это grid.

Про grid пишут, что далеко не все браузеры имеют поддержку. Вот тут диаграмма, как это выглядит.


  • 0


Оформление форума – IPBSkins.ru