styles.css

/* Объявление CSS переменных: */
:root {
    /* Ширина макета сайта: */
    --site-layout-width: 840px;
    /* Высота шапки и подвала: */
    --header-footer-height: 100px;
    /* Ширина боковых колонок: */
    --aside-width: 170px;
    /* Внутренние отступы у основных блоков сайта: */
    --basic-paddings: 15px;
    /* Фоновый цвет, отображаемый за пределами основной страницы: */
    --background-color: #E0E0E0;
    /* Фоновый цвет шапки и подвала: */
    --header-footer-background-color: #648FDE;
    /* Фоновый цвет боковых колонок: */
    --aside-background-color: #A2C1EF;
    /* Фоновый цвет списка статей: */
    --article-background-color: white;
}

/* Для всех элементов: */
* {
    /* Внутренние и внешние отступы будут «съедать» внутренние размеры блоков,
       а не наоборот: */
    box-sizing: border-box;
}

/* Сброс внешних и внутренних отступов для тегов html и body позволяет
   отрисовывать страницу от самого края области просмотра браузера,
   а стопроцентная высота позволяет растянуть по всей высоте экрана даже
   небольшую страницу: */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

/* Внутри блока body располагаются три гибких элемента: шапка, блок main и подвал.
   Этот блок принимает всю доступную ему высоту. */
body {
    /* Ширина макета сайта: */
    width: var(--site-layout-width);
    /* Выравнивание по центру для того, чтобы он располагался по середине
       страницы и не прилипал ни к какому краю. Обнуление отступов сверху
       и снизу для того, чтобы сетка начинала формироваться от верхнего края
       области просмотра браузера и свободно могла доходить до ее нижнего
       края: */
    margin: 0 auto;
    /* Фоновый цвет, отображаемый за пределами основной страницы: */
    background-color: var(--background-color);

    /* Создание контейнера с элементами FlexBox, т.е. все прямые дочерние элементы
       контейнера будут трансформированы в «гибкие» элементы этого контейнера
       и будут выравниваться в нём по flех-осям.
       К гибким контейнерам и элементам можно применять дополнительные свойства. */
    display: flex;

    /* Задание направления потока и главной оси. Значением по умолчанию является row,
       выстраивающее элементы в ряд точно так же, как и направление текста.
       С помощью значения column можно указать, что элементы выравниваются
       вертикально. Значения row-reverse и column-reverse располагают элементы
       в указанных направлениях, но начинаются они от конца, и заполнение идет
       в противоположном направлении.
       Главная ось соответствует направлению потока, заданному для flех-­контейнера.
       Для горизонтально ориентированных языков задание row означает, что главная
       ось окажется горизонтальной, задание column - что она будет вертикальной.
       Поперечной осью служит любое направление, перпендикулярное главной оси:
       вертикальное - для row, горизонтальное - для column.
       Итак, главная ось - направление потока, которое указано для flех-контейнера.
       Поперечная ось перпендикулярна главной оси.
       Направление, в котором блоки будут располагаться в столбец: */
    flex-direction: column;

    /* Выравнивание элементов вдоль главной оси.
       По умолчанию flех-элементы имеют ширину, ограниченную содержащимся в них
       контентом, а это означает, что на главной оси flex-контейнера может
       оставаться свободное место. Также по умолчанию (justify-content: flех-stаrt)
       элементы следуют друг за другом в направлении слева вправо (это зависит от
       направления чтения языка страницы и направления главной flех-оси).
       CSS свойство justify-content определяет, как браузер распределяет
       пространство между и вокруг элементов контента вдоль главной оси flex
       контейнера. Помогает распределить оставшееся свободное место в случае,
       когда элементы строки не «тянутся», либо тянутся, но уже достигли своего
       максимального размера. Выравнивание выполняется после того, как применяются
       длины и автоматические поля, что означает, что если во Flexbox разметке есть
       хотя бы один flex-элемент с flex-grow отличным от 0, то эффект не будет
       применён, потому что не останется свободного места.
       Поскольку свойство justify-content управляет величиной пространства в самом
       контейнере, это свойство применяется к элементу самого flех-контейнера.
       Выравнивание элементов в начале, элементы сдвигаются к началу строки: */
    /* justify-content: flех-stаrt; */

    /* Свойство CSS flex-wrap задаёт правила вывода flex-элементов - в одну строку
       или в несколько, с переносом элементов. Если перенос разрешён, то возможно
       задать направление, в котором будут располагаться новые строки.
       По умолчанию группа элементов не разбивается на дополнительные строки или линии
       (nowrap), значение wrap подключает возможность её разбивки на несколько строк
       в направлении от начала поперечной оси к ее концу. Например, если задано
       направление row, то строки располагаются сверху вниз.
       Значение wrap-reverse разбивает группу элементов на несколько строк (линий),
       но располагает их в противоположном направлении: от конца поперечной оси к её
       началу (то есть снизу вверх).
       Расположение в одну линию (nowrap) может привести к переполнению контейнера: */
    /* flex-wrap: nowrap; */

    /* Выравнивание элементов вдоль поперечной оси. CSS свойство align-items
       выравнивает flex-элементы текущей строки таким же образом, как
       и justify-content, но для поперечной оси (перпендикулярной к основной).
       Значением по умолчанию является stretch: элементы растягиваются, заполняя
       контейнер (с учётом min-width/max-width). */
    /* align-items: stretch; */
}

/* Шапка и подвал: */
header, footer {
    /* Фоновый цвет: */
    background-color: var(--header-footer-background-color);

    /* Свойство flex является сокращением для свойств flex-grow, flex-shrink
       и flex-basis. Здесь свойство flex-basis установлено в --header-footer-height.
       Оно определяет базовый размер гибкого элемента (высоту) перед распределением
       пространства в контейнере. При этом элементы не могут ужиматься (flex-shrink: 0),
       им также не разрешается увеличиваться в ширину (flex-grow: 0) больше, чем на
       --header-footer-height пикселов: */
    flex: 0 0 var(--header-footer-height);
}

/* Внутри блока main располагаются три гибких элемента: две боковые колонки
   aside и список статей article. Этот блок принимает всю доступную ему высоту. */
main {
    /* Фоновый цвет: */
    background-color: var(--article-background-color);

    /* Свойства блока main, как гибкого элемента в контейнере body:
       Свойство flex является сокращением для свойств flex-grow, flex-shrink
       и flex-basis. Свойство flex-basis определяет базовый размер гибкого
       элемента (высоту) перед распределением пространства в контейнере. Здесь
       свойство flex-basis не установлено и выбирается значение по умолчанию auto.
       Подробности см. ниже. При этом элемент не может ужиматься (flex-shrink: 0),
       но ему разрешается увеличиваться в высоту (flex-grow: 1), чтобы заполнить
       свободное пространство в контейнере: */
    flex: 1 0;
    /* По умолчанию для свойства flex-basis выбирается значение auto - тогда для
       размера элемента применяются задан­ные для него значения свойства width/height.
       Если свойство для главного раз­мера элемента (width или height) не установлено
       или установлено как auto (по умолчанию), то свойство flex-basis ориентируется
       на ширину (в данном случае, высоту) контента. Задавать точную ширину контента
       можно также, присвоив свойству flex-basis значение content, однако эта
       возможность пока еще не имеет удовлетворительной поддержки браузерами. */

    /* Свойства блока main, как контейнера с элементами FlexBox:
       Создание контейнера с элементами FlexBox, т.е. все прямые дочерние элементы
       контейнера будут трансформированы в «гибкие» элементы этого контейнера
       и будут выравниваться в нём по flех-осям.
       К гибким контейнерам и элементам можно применять дополнительные свойства. */
    display: flex;
    /* Задание направления потока и главной оси. Значением по умолчанию является row,
       выстраивающее элементы в ряд (строку) точно так же, как и направление текста: */
    /* flex-direction: row; */
}

/* Боковые колонки: */
aside {
    /* Фоновый цвет: */
    background-color: var(--aside-background-color);

    /* Свойства блоков aside, как гибких элементов в контейнере main:
       Свойство flex является сокращением для свойств flex-grow, flex-shrink
       и flex-basis. Здесь свойство flex-basis установлено в --aside-width.
       Оно определяет базовый размер гибкого элемента (ширину) перед распределением
       пространства в контейнере. При этом элементы не могут ужиматься (flex-shrink: 0),
       им также не разрешается увеличиваться в ширину (flex-grow: 0) больше, чем на
       --aside-width пикселов: */
    flex: 0 0 var(--aside-width);
}

/* Внутренние отступы у основных блоков сайта: */
header, footer, aside, article {
    padding: var(--basic-paddings);
}

/* Параметры списка статей: */
article {
    /* Внутренний отступ сверху нивелирует верхний отступ у первого заголовка: */
    padding-top: 0;

    /* Свойства блока article, как гибкого элемента в контейнере main полностью
       аналогичны свойствам блока main, как гибкого элемента в контейнере body:
       Свойство flex является сокращением для свойств flex-grow, flex-shrink
       и flex-basis. Свойство flex-basis определяет базовый размер гибкого
       элемента (ширину) перед распределением пространства в контейнере. Здесь
       свойство flex-basis не установлено и выбирается значение по умолчанию auto.
       Подробности см. выше. При этом элемент не может ужиматься (flex-shrink: 0),
       ему также разрешается увеличиваться в ширину (flex-grow: 1), чтобы заполнить
       свободное пространство в контейнере main: */
    flex: 1 0;
}