npm

mfm-flex

1.1.30 • Public • Published

#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 x29a100@mail.ru +375255451247

Readme

Keywords

none

Package Sidebar

Install

npm i mfm-flex

Weekly Downloads

4

Version

1.1.30

License

none

Unpacked Size

17 kB

Total Files

4

Last publish

Collaborators

  • x29a1000