[X] Помощник

[master-vek Topic Starter]

Об этом узнал только тогда, когда начал раздумывать что при меню в двадцать с лишним пунктов возникают проблемы с разрастанием кода в приличных объёмах.  Оказывается технология  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.4.2018, 23:46

Причина редактирования: подправил код

[fedornabilkin]

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

[master-vek Topic Starter]

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

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

Замечание модератора: Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней. Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой или обратитесь к любому из модераторов.