05

Flexbox

CSS: flexbox

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

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

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

    • flex-контейнер, flex-элементы;
    • главная и поперечная оси;
    • изменение направления осей;
    • выравнивание элементов;
    • управление размерами элементов;
    • порядок элементов;
    • свойство gap;
    • прием использования margin-right: auto, margin-right: auto;

    Статья по flex

  2. Для выполнения работы необходимо в style.css из третьей работы:

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

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

  4. Загрузить проект на хостинг.

.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:

  • Код html и css отформатирован;
  • Корректное использование тегов;
  • Корректно выбранные форматы изображений;
  • Отсутствие ошибок на валидаторе для html и css.

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

Результаты работы проверены наставником.

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

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

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

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