Flexbox и абсолютное позиционирование

Flexbox и абсолютное позиционирование

От создателя: не так давно я пробовал сделать приложение с открытым начальным кодом для видеоконференций специально для онлайн-встреч. Кажется, как и хоть какой иной разраб на планетке. Приложения для видеоконференций — это новейшие чат-боты. Быть может.

Это также было неплохой предпосылкой для того, чтоб лучше познакомиться с OpenTok, потому что ранее у меня не было сценария использования для него. Я, возможно, обрисую весь процесс в длинноватом, состоящем из нескольких частей посте, когда я вправду получу его в разумной форме MVP.

Но этот мини-пост посвящен Flexbox и абсолютному позиционированию, также незначимой ошибке (по последней мере, я так думаю) в инструментах разраба Firefox.

Что происходит, когда вы задаете position: absolute для flex-элемента?

Я не могу быть единственным человеком, который пробовал это, правильно? Хотя для меня это был 1-ый раз, когда я практически употреблял такую комбинацию, в то же время я читал о этом, когда просматривал спецификацию Flexbox.

Конкретно потому я знал, что в ней есть раздел, детализирующий это, 4.1. Полностью позиционированные flex-потомки. Я не запомнил спецификацию, я просто знал, что таковой раздел существует, отлично? Разрешите мне тормознуть на главных моментах, которые я считаю более существенными:

… Полностью позиционированный потомок flex-контейнера не участвует во flex-макете.

Но:

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

что значит:

READ
Chrome 87 стал в пять раз меньше потреблять мощностей ЦП

… Если вы установите для полностью позиционированного дочернего элемента flex-контейнера, к примеру, align-self: center;, автоматическое смещение дочернего элемента будет центрировать его по оси х flex-контейнера.

Давайте разберемся с сиим. 1-ая часть достаточно ординарна. Если вы позиционируете flex-элемент полностью, он больше не участвует во flex-макете. Это значит, что любые характеристики flex для элемента стают необязательными. Вы сможете удалить их, если желаете.

Последующая часть разъясняет, что полностью позиционированный элемент ведет себя так, как как будто он является единственным flex-элементом во flex-контейнере. Итак, пересмотрите свою ментальную модель последующим образом:

Как создать липкий футер с помощью flexbox

Характеристики сглаживания блока все еще используются к flex-элементу, даже если он полностью позиционирован, что значит внедрение align-self. Подробную информацию о том, как работает поведение normal в этом случае, можно отыскать в соответственном разделе Модуля сглаживания блоков CSS уровня 3.

Доборная информация, которую я не буду разглядывать тщательно: 8. Описание размеров и расположения частей, которое описывает размер полностью позиционированных частей. (Быть может, это будет в будущей записи в блоге).

Вероятная ошибка в инструментах разраба

Инструменты разраба Firefox содержат функцию, которая докладывает для вас, почему определенный CSS неактивен. Это достаточно круто, и я использую это для параметров, связанных с макетом. Но она докладывает, что свойство align-self не интенсивно, поэтому что полностью позиционированный элемент не является flex-элементом.

Я не весьма согласен с сиим…

Как создать липкий футер с помощью flexbox

Но это имеет эффект. И сам браузер ведет себя как положено. Итак, я думаю, что это ошибка инструментов разраба? Я не уверен, потому я написал о ошибке и надеюсь, что кто-то разберется с сиим.

TLDR о том, почему я употреблял абсолютное позиционирование для flex-элемента

Сейчас мое приложение работает таковым образом, что все виде-стримы сходятся в одном родительском контейнере. Я желаю иметь возможность выделить один поток и создать его огромным по размеру (общий шаблон пользовательского интерфейса в большинстве клиентов видеоконференций).

READ
Динамические метатеги для ботов и сканеров с помощью Firebase и Cloudflare Workers

Это происходит, когда для избранного контейнера элемента стрима добавляется класс CSS .focused, но так как все стримы находятся на этом же уровне, это собственного рода хакерский метод. Поглядим, смогу ли я поменять разметку, пока не понимаю как.

В любом случае, проект, над которым я работаю, находится на GitHub, если кому-то это любопытно.

Как создать липкий футер с помощью flexbox

Он движется медлительно, и если вы думаете, что он смотрится благопристойно, то это поэтому, что я пока избегаю наиболее сложных заморочек и заместо этого работаю над макетом.

Создатель: Chen Hui Jing

Редакция: Команда webformyself.

Источник

Оценить статью
Блог о самом интересном.