Веб дизайн реализуется триединством языков сущностей:

• - сущность содержания и структуры
• - сущность формы
• - сущность (интер)активности

• CSS справочник //puzzleweb.ru

Блоки

?

Запрет переноса

Неразрывный пробел   запрещает перенос следующего слова или блока, но его действие может быть отменено некоторыми тегами и свойствами (см. ниже).
Парный тег <nobr></nobr> заставляет отображать текст без переносов, одной строкой, что может привести к появлению горизонтальной полосы прокрутки. Тег не входит в спецификацию HTML, но поддерживается всеми браузерами.
Свойство white-space:nowrap устанавливает отображение, при котором пробелы между словами не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой, добавление тега <br> переносит текст на новую строку.
.style.whiteSpace='nowrap';

Верстка Flexbox

// Переклад "A Complete Guide to Flexbox" //medium.com

• display:
  • flex
  • inline-flex
• flex-direction устанавливает направление главной оси и определяет направление flex-элементов размещенных в flex-контейнере:
  • row (стандартное положение) — слева направо
  • row-reverse — элементы располагаются справа налево
  • column аналогично row, только сверху вниз
  • column-reverse аналогично row-reverse, но снизу вверх
• flex-wrap управляет размещением flex-элементов в ограниченном пространстве
  • nowrap поумолчанию все flex элементы будут выстраиваться в одну линию
  • wrap элементы будут переноситься в следующие строки ниже или правей
  • wrap-reverse элементы будут переноситься в предыдущие строки выше или левей
• flex-flow (применяется для родительского flex контейнера) Это сокращение flex-direction и flex-wrap свойств, которые вместе определяют направление главной и поперечной оси. По-дефолту оно имеет значение row nowrap
  • flex-direction
  • flex-wrap
• justify-content определяет выравнивание вдоль главной оси. Оно помогает распределить лишнее свободное пространство, когда, либо все flex элементы в линии имеют фиксированный размер, либо же нет, но уже достигли своего максимального размера. Оно также влияет на выравнивание элементов, когда те переполнят строку
  • flex-start — дефолтное состояние, при котором элементы расставляются от начала строки
  • flex-end — состояние, в котором элементы размещены с конца строки
  • center — элементы центрированы вдоль строки
  • space-between — элементы равномерно распределены по строке, первый элемент находится вначале строки, последний в конце
  • space-around — элементы равномерно распределены по строке с равным местом вокруг них. Учтите, что визуально пробелы не равномерны, так как все элементы имеют одинаковые пробелы с двух сторон. Первый элемент получит одну единицу свободного места от границы контейнера, но получит две единицы свободного места от следующего элемента, так как у него тоже есть одна единица свободного места с каждой из сторон
  • space-evenly — элементы распределены таким образом, что свободное пространство между любыми двумя элементами равномерно, как и место до границы края контейнера
• align-items свойство определяет стандартное поведение того, как flex элементы будут располагаться вдоль поперечной оси на заданной строке. Это своебразная версия justify-content, но только для поперечной оси, которая перпендикулярна главной
  • flex-start — всё размещается с начала поперечной оси
  • flex-end — все элементы размещаются с конца поперечной оси
  • center — элементы центрируются по поперечной оси
  • baseline — элементы выравниваются по базовой линии
  • stretch — это дефолтное состояние, при котором элементы заполяют контейнер, с учетом min-width и max-width
• align-content свойство выравнивает и распределяет строки контейнера, когда есть свободное пространство в поперечной оси, подобно тому как justify-content, оно выравнивает элементы по главной оси. Свойство не имеет эффекта, если строка flex элементов только одна
  • flex-start — строки расположены от начала контейнера
  • flex-end — строки расположены от конца контейнера
  • center — строки расположены от центра контейнера
  • space-between — строки равномерно распределены, первая строка находится вначале контейнера, тогда как последняя находится в конце
  • space-around — строки равномерно распределены с равным местом вокруг каждой строки
  • stretch — стандартное состояние, при котором строки растягиваются на вся оставшееся место
• order положительное или отрицательное значение свойства у flex-элемента изменяет его положение в группе, которое по умолчанию соответствует порядку определения 1, 2, 3
• flex-grow положительное значение свойства определяет расширение flex-элемента в доступном свободном пространстве и долю свободного пространства при распределение между другими flex-элементами
• flex-shrink  положительное значение свойства определяет возможность flex-элемента сжиматься
• flex-basis свойство определяет стандартный размер элемента, перед тем как оставшееся место будет распределено
• align-self свойство flex-элемента подавляет выравнивание flex-контейнера align-items другим значением:
  • auto, flex-start, flex-end, center, baseline, stretch

Верстка Grid

Адаптивный дополненный перевод "CSS Grid Tutorial" //medium.com

CSS Grid модель позволяет создавать шаблоны в системе сетки, образованной пересекающимися горизонтальными и вертикальными линиями, задающими размерность и систему координат для контента в grid-контейнере.

• display: grid делает элемент grid-контейнером, и все прямые потомки автоматически становятся  grid-элементами
  • inline-grid
  • subgrid
• grid-template-rows: 1fr 1fr 1fr;
• grid-template-columns: 1fr 1fr 1fr;
• grid-gap: 2vw;

...

Изменение стиля

Стиль заданный в CSS доступен в JS

Получение вычисленного значения свойства стиля примененного к элементу методом
window.getComputedStyle(element, pseudoElement)

Изменение значения свойства стиля по селектору (не всегда срабатывает):

Изменение значения свойства добавлением правила CSSOM

How to Change CSS Styles with JavaScript – From Basic to Advanced Methods //blog.shimin.io

Джерела