CoderslangJS

Нужно добавить flex модуль на страницу. Блок с классом container должен стать flex-контейнером. Элементы должны распределяться с одинаковым расстоянием между ними. Эта задача — часть курса по Full-Stack JavaScript...

Давай немного выровняем расположение элементов. Блок с классом container должен быть flex-контейнером. Элементы внутри flex-контейнера по вертикали должны быть по середине. По горизонтали элементы должны быть выровнены с одинаковым расстояние между ними и краями контейнера....

Давай попробуем отобразить длительность с помощью flex. Сделай блок с классом container flex-контейнером. Среди всех flex элементов надо распределить свободное пространство. Первому надо отдать только 1 единицу, второму в два раза больше, третьему 6...

Цифры идут в неправильном порядке, а элементы еще и не помещаются в одну строку. Сделай так, чтобы элементы располагались на несколько строчек. В каждой строке цифры должны идти в правильном порядке....

С помощью flexbox легко делать боковую навигацию. Достаточно сделать блок с классом nav flex-контейнером и распределить в нем элементы колонкой. Еще стоит добавить ширину, скажем 150px. Элементу body укажи margin 0px....

Давай немного украсим нашу навигацию. Задай задний фон блоку .nav цвет заднего фона #E5E8EF. Добавь блоку .nav блоку вертикальный padding 10px, горизонтальный - 15px. Высота блока навигации должна быть во всю страницу, давай укажем 100vh....

Каждой ссылке с классом nav-item добавь снизу поля 15px и padding 5px. Цвет заднего фона должен быть #bac2d5, а цвет теста - #232324. Также стоит убрать нижнее подчеркивание у ссылки (используй свойство text-decoration)....

В документе уже есть grid-контейнер с одним единственным элементом. Но этот элемент растянуть на весь экран. Сделай так, что бы элемент располагался посередине grid контейнера, а не растягивался. Используй одно свойства и для вертикального расположения, и для горизонтального....

Элемент с классом grid-container должен стать grid контейнером. Все элементы внутри него должны расположится в три колонки и четыре строчки. Укажи и колонки, и строчки автоматической ширины и высоты. Используй конструкцию repeat()....

С помощью Grid можно легко создать структуру страницы. Этим и займемся. Начнем с того, что элемент .page-layout станет grid-контейнером. У нашей страницы должно быть две колонки: 50px и auto, одна из которых будет для навигации, вторая для контента страницы....