mfm-flex
v1.1.30
Published
Библиотека создана для упращения flexbox верстки. Базировалась на библитеке angular-material.css Для простоты были убраны везде повторяющиеся слова layout. И сменилась способ адаптации под экраны.
Downloads
228
Readme
#flex.css Документация Библиотека создана для упращения flexbox верстки. Базировалась на библитеке angular-material.css Для простоты были убраны везде повторяющиеся слова layout. И сменилась способ адаптации под экраны.
##Оси В flexbox разметка делится на строки и колонки. У них есть главные и побочные оси. Ось - направление в котором добавляются блоки. У строки главная ось начинается слева на право. У колонки главная ось начинается сверху вниз. Побочная ось - ось противоположная главной.
##сlass col row Классы определяют направление главной оси
##align-start align-center align-end Классы определяют выравнивание контента по главной оси
##align-[]-start align-[]-center align-[]-end Классы определяют выравнивание контента по главной(квадратные скобки нужно заменить на выравнивание) и побочной оси
##flex Растягивает контент по главной оси
##flex-10 flex-20 ... flex-90 flex-33 flex-66 Растягивает контент по главной оси на указанный процент
##fill Растягивает контент по всем осям
##hide show Скрывает или показывает контент в зависимости от разрешения экрана
##wrap Переносит контент который не влезает в строку на следующую
##Пример старта: Центрирование страницы
<body class="row align-center">
<div class="col" style="width: 960px">
Hello from the center!
</div>
</body>##Префиксы mobile tablet К каждому вышеперечисленному выше классу можно приписать префикс который будет работать только на определенный разрешениях Ширина экрана mobile равна 600 пикселей. Ширина экрана tablet равна 960 пикселей.
##Пример: Адаптация на меньшее разрешение
##Увеличение скорости верстки В популярных средах программирования как IntellijIdea создание классов упрощено и существенно повышает скокрость верстки. Для этого необходимо в поставить точку и далее просто написать название класса и нажать клавишу таб. Пример: .col конвертируется в
##Совместимость c Angular Так как данная библиотека не совместима с Angular но и исправляет некоторые недочеты материал дизайна. Такие как очень большие отступы в md-input-container и излишнее занятое пространство под сообщения под ошибках в md-input-container.
##Разработчик Михаил Гайдук 2021 [email protected] +375255451247