Почему во втором примере блоки выровнялись по базовой линии текста - но она оказалась ниже главной оси?
Как ниже? Пунктирная линия со стрелкой указывает лишь направление. Сама ось - это всё пространство слева направо.
Ага,поняла, спасибо. А положение базовой линии как определяется? По первому элементу?
Получается так, по нижнему краю букв, начиная с первого элемента.
Дальше все стало еще хуже.
Почему, задавая align-self, то есть воздействуя на блоки индивидуально - мы получаем между ними зависимость при выравнивании по базовой линии?
- Откуда взялась вообще базовая линия для Семена? Если мы только ему задали выравнивание по базовой линии?
- Почему потом Кекс встал на ту же базовую линию, которая уже появилась у Семена? Если мы задаем им не 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.
При этом важно понимать, что нижние границы блоков не совпадут, потому что размер блока зависит от его содержимого.
И еще кое-что интересное - если текста у вас много, то блоки выстроятся только по базовой линии первой строки.
Вроде разобрались. Но если остались вопросы - милости прошу.
Большое спасибо!
Вопрос: зачем мы тогда используем align-self для элемента, если в итоге получаем эффект align-items:baseline ? Ведь это он заставляет все элементы выстроиться по одной и той же базовой линии. А по смыслу как-бы предполагалось, что align-self - эгоистическое свойство, управляющее строго своим элементом
Эффект align-items:baseline мы получаем только если задаем align-self: baseline абсолютно всем элементам - это было указано для наглядности, но, конечно, его на самом деле нужно просто заменять на первое. А в остальном мы рассматриваем изменение поведения только нескольких отдельных элементов.