Стань PHP-разработчиком с нуля с трудоустройством в IT-компании

Дерево навыков/Flexbox/ Flex-контейнер, участники и оси

  1. Базовый уровень

    • Базовая Flex-раскладка

      Распознаёт создание flex container через `display: flex`, выбирает `row`, `row-reverse`, `column` и `column-reverse`, а в однострочном контейнере с направлением `row` управляет распределением по main axis через `justify-content` и выравниванием items по cross axis через `align-items`.

      Уровень

    • Формирование flex items

      Определяет, какие in-flow дочерние boxes flex container становятся flex items.

    • Main и cross axes

      Различает main/cross axes, их размеры и стороны start/end.

  2. Продвинутый уровень

    • Anonymous flex items

      Формирует anonymous flex items из текстового содержимого с учётом незначимого whitespace.

    • Внешнее и внутреннее участие flex item

      Различает участие box как flex item и formatting context, используемый для layout его содержимого.

    • Reversed-направления

      Определяет main-start и main-end для reversed-направлений.

    • Mapping осей в physical directions

      Отображает Flex axes в physical directions при заданных writing mode и direction.

    • Cross axis при wrap-reverse

      Определяет изменение cross-start и cross-end при `wrap-reverse`.