От автора: недавно я пытался создать приложение с открытым исходным кодом для видеоконференций специально для онлайн-встреч. Кажется, как и любой другой разработчик на планете. Приложения для видеоконференций — это новые чат-боты. Может быть.
Это также было хорошей причиной для того, чтобы лучше познакомиться с OpenTok, так как ранее у меня не было сценария использования для него. Я, вероятно, опишу весь процесс в длинном, состоящем из нескольких частей посте, когда я действительно получу его в разумной форме MVP.
Но этот мини-пост посвящен Flexbox и абсолютному позиционированию, а также незначительной ошибке (по крайней мере, я так думаю) в инструментах разработчика Firefox.
Что происходит, когда вы задаете position: absolute для flex-элемента?
Я не могу быть единственным человеком, который пробовал это, верно? Хотя для меня это был первый раз, когда я фактически использовал такую комбинацию, в то же время я читал об этом, когда просматривал спецификацию Flexbox.
Именно поэтому я знал, что в ней есть раздел, детализирующий это, 4.1. Абсолютно позиционированные flex-потомки. Я не запомнил спецификацию, я просто знал, что такой раздел существует, хорошо? Позвольте мне остановиться на ключевых моментах, которые я считаю наиболее существенными:
… Абсолютно позиционированный потомок flex-контейнера не участвует во flex-макете.
Однако:
Статическое положение абсолютно позиционированного дочернего элемента flex-контейнера определяется так, что дочерний элемент позиционируется так, как если бы он был flex-элементом во flex-контейнере, предполагая, что и дочерний элемент, и flex-контейнер являются блоками с фиксированным размером в соответствии с занимаемым ими размером.
что означает:
… Если вы установите для абсолютно позиционированного дочернего элемента flex-контейнера, например, align-self: center;, автоматическое смещение дочернего элемента будет центрировать его по оси х flex-контейнера.
Давайте разберемся с этим. Первая часть довольно проста. Если вы позиционируете flex-элемент абсолютно, он больше не участвует во flex-макете. Это означает, что любые свойства flex для элемента становятся необязательными. Вы можете удалить их, если хотите.
Следующая часть объясняет, что абсолютно позиционированный элемент ведет себя так, как будто он является единственным flex-элементом во flex-контейнере. Итак, пересмотрите свою ментальную модель следующим образом:
Свойства выравнивания блока все еще применяются к flex-элементу, даже если он абсолютно позиционирован, что означает использование align-self. Подробную информацию о том, как работает поведение normal в этом случае, можно найти в соответствующем разделе Модуля выравнивания блоков CSS уровня 3.
Дополнительная информация, которую я не буду рассматривать подробно: 8. Описание размеров и расположения элементов, которое определяет размер абсолютно позиционированных элементов. (Может быть, это будет в будущей записи в блоге).
Возможная ошибка в инструментах разработчика
Инструменты разработчика Firefox содержат функцию, которая сообщает вам, почему определенный CSS неактивен. Это довольно круто, и я использую это для свойств, связанных с макетом. Однако она сообщает, что свойство align-self не активно, потому что абсолютно позиционированный элемент не является flex-элементом.
Я не очень согласен с этим…
Но это имеет эффект. И сам браузер ведет себя как положено. Итак, я думаю, что это ошибка инструментов разработчика? Я не уверен, поэтому я написал об ошибке и надеюсь, что кто-то разберется с этим.
TLDR о том, почему я использовал абсолютное позиционирование для flex-элемента
На данный момент мое приложение работает таким образом, что все виде-стримы сходятся в одном родительском контейнере. Я хочу иметь возможность выделить один поток и сделать его большим по размеру (общий шаблон пользовательского интерфейса в большинстве клиентов видеоконференций).
Это происходит, когда для выбранного контейнера элемента стрима добавляется класс CSS .focused, но поскольку все стримы находятся на одном уровне, это своего рода хакерский способ. Посмотрим, смогу ли я изменить разметку, пока не знаю как.
В любом случае, проект, над которым я работаю, находится на GitHub, если кому-то это интересно.
Он движется медленно, и если вы думаете, что он выглядит прилично, то это потому, что я пока избегаю более сложных проблем и вместо этого работаю над макетом.
Автор: Chen Hui Jing
Источник: https://www.chenhuijing.com
Редакция: Команда webformyself.