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


Пользователь месяца
TimurR TimurR 1-й за Август
Очков активности: 726 3 темы, 35 сообщений, 11 баллов репутации
ТОП самых активных за этот месяц
  • Фотография ShowPrint
    #1

    ShowPrint (ShowPrint.ru)
    Очков активности: 207 2 темы, 17 сообщений, 6 баллов репутации

  • Фотография Ixman
    #2

    Ixman (o5cat.ru)
    Очков активности: 105 0 тем, 10 сообщений, 7 баллов репутации

  • Фотография WGN
    #3

    WGN (worldgamenews.com)
    Очков активности: 81 Вне конкурса за определение пользователя месяца

  • Фотография magnet
    #4

    magnet (rbfxdirect.com)
    Очков активности: 67.5 Вне конкурса за определение пользователя месяца

  • Фотография BLIK
    #5

    BLIK
    Очков активности: 36 Вне конкурса за определение пользователя месяца

  • Фотография AnnaYa
    #6

    AnnaYa (topbase.ru)
    Очков активности: 33 2 темы, 5 сообщений, 2 балла репутации

  • Фотография Developer
    #7

    Developer
    Очков активности: 33 2 темы, 16 сообщений, 1 балл репутации

  • Фотография TimurR
    #8

    TimurR
    Очков активности: 31.5 Вне конкурса за определение пользователя месяца

  • Фотография Алексей111
    #9

    Алексей111
    Очков активности: 28.5 5 тем, 4 сообщения, 1 балл репутации

  • Фотография fedornabilkin
    #10

    fedornabilkin (zaka4ano.ru)
    Очков активности: 24 0 тем, 4 сообщения, 4 балла репутации

  • Показать весь ТОП 10

Kwork.ru - услуги фрилансеров от 500 руб.

Поддержите форум! =)
Апдейты
  • Яндекс тИЦ: 19.11.2017
  • Яндекс выдача: 24.09.2018
Топ 5 участников по репутации


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

#1 master-vek

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

Отправлено 15 April 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 April 2018 - 22:46
подправил код

  • 0

#2 fedornabilkin

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

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

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

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


  • 0

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



#3 master-vek

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

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

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

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


  • 0


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