Skip to content
Веб-разработка
GitHub

Flexbox

Цель: изучить принципы работы flexbox и его свойств, цветовые модели, единицы измерения, получить навыки их использования при верстке макета.

Порядок выполнения лабораторной работы:

  1. Изучить общие принципы работы flexbox:

    • flex-контейнер и flex-элементы;
    • главная и поперечная оси;
    • изменение направления осей;
    • выравнивание элементов;
    • управление размерами элементов;

  2. Выполнение:

    • скрыть заголовки и текст в label, которые отсутствуют по дизайну с помощью класса sr-only. Его код приведен ниже.
    • добавить display: flex для требуемого расположения элементов, там где не хватает аккуратного расположения элементов в строку. Если для решения этой задачи не хватает группирующего элемента, то добавляйте div;
    • использовать необходимые свойства для контейнера и элементов для их выравнивания, расположения и управления размерами;

  3. Зафиксировать результаты работы с помощью системы контроля версий git и отправить репозиторий на Github.

Полезные классы

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  white-space: nowrap;
  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}

Результаты выполнения лабораторной работы:

Статическая веб-страница на хостинге, со структурой, которая соответствует требованиям и сохранена в системе контроля версий.

Требования к html и css:

Дополнительные источники

Flexbox

  1. Гайд по flexbox
  2. Flexbox MDN
  3. An Interactive Guide to Flexbox
  4. Digging Into the Flex Property
  5. Building Website Headers with CSS Flexbox
  6. Шпаргалка по flexbox
  7. Игры для тренировки:
    1. Froggy
    2. Defence
  8. Flexbox

Вопросы для защиты

  1. Что такое флекс-контейнер?
  2. Что такое флекс-элемент?
  3. Какие свойства применяются на флекс-контейнере?
  4. Какие свойства применяются на флекс-элементе?
  5. Какие оси есть у флексов и какие свойства меняют их направления?
  6. Как выстраиваются флекс-элементы в контейнере?
  7. Какие свойства и как они выравнивают флекс-элементы?
  8. Что делают свойства flex-grow, flex-shrink и flex-basis?