Флексбокс, выравнивание по базовой линии

Почему во втором примере блоки выровнялись по базовой линии текста - но она оказалась ниже главной оси?

Как ниже? Пунктирная линия со стрелкой указывает лишь направление. Сама ось - это всё пространство слева направо.

Ага,поняла, спасибо. А положение базовой линии как определяется? По первому элементу?

Получается так, по нижнему краю букв, начиная с первого элемента.

1 лайк

Дальше все стало еще хуже.
Почему, задавая align-self, то есть воздействуя на блоки индивидуально - мы получаем между ними зависимость при выравнивании по базовой линии?

  1. Откуда взялась вообще базовая линия для Семена? Если мы только ему задали выравнивание по базовой линии?
  2. Почему потом Кекс встал на ту же базовую линию, которая уже появилась у Семена? Если мы задаем им не align-items (который должен воздействовать на всех), а align-self, который воздействует эгоистично на один коврик?

ну и напоследок вообще вопрос из космоса - а почему базовая линия находится в верхней части блока, а не внизу, скажем?

Интересная тема. Давайте порассуждаем.

Что такое базовая линия - эта линия на которой буквы “стоят”. Она проходит по самому нижнему краю букв c плоской нижней частью. То есть она есть всегда у любого текста. Попробуйте кликнуть инструментом “Текст” (Т) на любой надписи в Photoshop и Вы ее увидите в виде тонкой линии по краю букв.

Важно! Базовая линия теста не совпадает с линией, заданной text-decoration: underline;
Более того - даже краешки букв с полукруглым низом и выступающие части букв находятся ниже нее.

Ок. Что это такое мы разобрались, идем дальше.

Я создала маленькую демку, давайте с ней играться.

У нас есть 6 блоков с именами:

Зададим align-self: baseline; для блока Diana.


Почему он прижимается к верху?
А он и не прижимается. Он выравнивается по базовой линии, но так как он один с таким выравниванием, то по своей собственной. Почему же он именно сверху - потому что для блоков нормальное поведение идти слева-направо и сверху-вниз, если не задано обратного.
Можно даже обнулить font-size и padding у блока и для видимости задать рамку в 1px - от будет сплющен возле самого верхнего края секции.

Теперь зададим align-self: baseline; для блока Molly.


Так как у них одинаковый font-size, базовая линия у них тоже одна.

Еще интересней - зададим align-self: baseline; для блока Agnes.


Почему блоки Diana и Molly опустились?
Потому что это нормальное поведение для текста в принципе. Попробуйте написать в любом текстовом редакторе на одной строке слова с разным размером шрифта - они все стоят на одной базовой линии. Или в том же Photoshop:

Поэтому если, к примеру, всем блокам сразу задать align-self: baseline;, то они всегда выстроятся на базовой линии элемента с самым большим значением font-size.

При этом важно понимать, что нижние границы блоков не совпадут, потому что размер блока зависит от его содержимого.

И еще кое-что интересное - если текста у вас много, то блоки выстроятся только по базовой линии первой строки.

Вроде разобрались. Но если остались вопросы - милости прошу.

3 лайка

Большое спасибо!
Вопрос: зачем мы тогда используем align-self для элемента, если в итоге получаем эффект align-items:baseline ? Ведь это он заставляет все элементы выстроиться по одной и той же базовой линии. А по смыслу как-бы предполагалось, что align-self - эгоистическое свойство, управляющее строго своим элементом

Эффект align-items:baseline мы получаем только если задаем align-self: baseline абсолютно всем элементам - это было указано для наглядности, но, конечно, его на самом деле нужно просто заменять на первое. А в остальном мы рассматриваем изменение поведения только нескольких отдельных элементов.

1 лайк