Почему не работает align self

CSS свойство align-self

Определение и применение

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

Свойство переопределяет значение выравнивания, заданного для контейнера свойством align-items конкретному элементу.

Если элемент не является флекс элементом, или элементом сетки макета (не находится внутри родительского элемента, который является блочным, или строчным флекс, или grid-контейнером), то свойство align-self не окажет на такой элемент никакого эффекта.

Более подробную информацию о работе с флекс элементами вы можете получить в статье учебника CSS «Верстка по Flexbox (работа с элементами)».

Обращаю Ваше внимание, что если для элемента установлено свойство margin(внешние отступы) со значением auto , то свойство align-self будет игнорировано.

Схематичное отображение работы свойства align-self отображено на следующем изображении:

* — для элементов сетки макета (grid-элементы) допускается использование сокращенных значений start и end , для флекс элементов необходимо использовать полные значения flex-start и flex-end .

Для того, чтобы произвести выравнивание элемента макета сетки внутри ячейки по оси строки grid-контенера вы можете воспользоваться свойством justify-self.

Поддержка браузерами

Свойство	Chrome	Firefox	Opera	Safari	IExplorer	Edge
align-self (флекс элементы)	21.0	20.0	12.1	9.0 7.0 -webkit-	11.0	12.0
align-self (элементы сетки)	54.0*	52.0	44.0	10.3	10.0* -ms-	16.0 12.0 -ms-

Значения свойства

Значение	Описание
auto	Элемент наследует значение его родительского контейнера. Если родительский контейнер не имеет значения, то значение, устанавливается, как stretch . Это значение по умолчанию.
stretch	Элемент растягивается по размеру строки контейнера вдоль поперечной оси.
center	Элемент располагается по центру строки контейнера (середина поперечной оси).
flex-start	Элемент располагается в начале строки контейнера (начало поперечной оси). Для элементов сетки макета (grid-элементы) допускается использование сокращенного значения start , для флекс элементов необходимо использовать полное значение flex-start .
flex-end	Элемент располагается в конце строки контейнера (конец поперечной оси). Для элементов сетки макета (grid-элементы) допускается использование сокращенного значения end , для флекс элементов необходимо использовать полное значение flex-end .
baseline	Элемент распологается по его базовой линии строки контейнера.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Указывает, что значение наследуется от родительского элемента.

Версия CSS

Наследуется

Анимируемое

Пример использования

В этом примере мы создали блочный флекс контейнер, внутри которого мы разместили пять элементов

С использованием псевдокласса :nth-of-type() указали для каждого элемента свое значение свойства align-self .

Для первого элемента

Для второго элемента

Третий элемент располагается в начале строки флекс контейнера (начало поперечной оси), а четвертый располагается в конце строки флекс контейнера (конец поперечной оси).

Пятый флекс элемент располагается по его базовой линии строки флекс контейнера.

Пример использования свойства align-self (для флекс элементов).

В следующем примере мы рассмотрим использование свойства align-self для элементов сетки макета:

В этом примере мы разместили блочный grid-контейнер, внутри которого мы разместили десять элементов

• С помощью свойства grid мы указываем два значения, которые определяют, что мы размещаем в макете сетки две строки, используя допустимое значение длины в «гибких» единицах измерения fr (fractional unit). В этом случае каждая строка занимает часть оставшегося пространства в контейнере сетки макета пропорционально заданному коэффициенту. Через косую черту с помощью функциональной нотации repeat() мы размещаем в макете сетки пять столбцов, используя допустимое значение длины в «гибких» единицах измерения fr.
• С помощью свойства grid-gap определяем расстояние (промежуток) между строками и столбцами в макете сетки.
• С помощью свойства align-self мы указываем, что все элементы располагаются по центру строки контейнера.

С использованием псевдокласса :nth-of-type() указали для каждого элемента свое значение свойства align-self :

Для первого и шестого элемента

Пример использования свойства align-self (для grid элементов). CSS свойства

Источник

Flexbox align-items: baseline работает, но align-self: baseline не работает. Почему?

кажется, я наблюдаю какое-то запутанное поведение с flexbox, особенно при попытке использовать align-self: baseline . Основная проблема заключается в том, что он просто не работает; следующий фрагмент демонстрирует проблему:

вот скриншот того, как выглядит вывод:

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

это правильное поведение в соответствии со спецификацией, или это ошибка? Если так, то почему? Есть ли обходной путь? Для справки, я тестировал Chrome 54, Safari 9.1.2 и Firefox 50 на macOS 10.11.6, и все они, похоже, показывают те же результаты.

1 ответов

решение

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

объяснение

начальная настройка контейнера flex является align-items: stretch .

это значит что все детали гибкого трубопровода расширят полную длину поперечной оси контейнера.

вот что происходит в вашем макете. за исключением, вы переопределили align-items: stretch on один гибкий элемент ( label ), путем применения align-self: baseline .

пока другие детали гибкого трубопровода протягивают, ярлык имеет baseline инструкция – но нет точки отсчета.

baseline

если встроенная ось элемента flex совпадает с поперечной осью, это значение идентично flex-start .

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

Хорошо, давайте разберем это:

первая строка не относится. В этом случае flex пункт встроенные оси это то же самое, что и основная ось (горизонтальная), а не поперечная ось (вертикальная), поэтому baseline не разрешено flex-start .

«. все участвующие элементы flex на линии выровнены таким образом, чтобы их базовые линии выровнялись. « Ну, есть только один элемент с базовой линии. Нет никаких других исходных данных. По-видимому, браузер возвращается к flex-start в такой ситуации (но я не видел официального ссылка на это поведение).

остальная часть языка спецификаций не имеет отношения к этому вопросу, но подробно рассматривается в этом соответствующем посте:в чем разница между flex-start и базовой линией?

Источник

Всё, что нужно знать о выравнивании во Flexbox

Об авторе: Рэйчел Эндрю — не только главный редактор журнала Smashing Magazine, но и веб-разработчик, писатель и спикер. Она автор ряда книг, в том числе The New CSS Layout, один из разработчиков системы управления контентом Perch. Пишет о бизнесе и технологиях на своём сайте rachelandrew.co.uk.

Краткое содержание: в этой статье мы рассмотрим свойства выравнивания во Flexbox и некоторые основные правила, как работает выравнивание по основной и поперечной осям.

В первой статье этого цикла я рассказала, что происходит при объявлении свойства display: flex для элемента. Сейчас рассмотрим свойства выравнивания и как они работают с Flexbox. Если вы когда-либо приходили в замешательство, применить align или justify , надеюсь, эта статья многое прояснит!

История выравнивания во Flexbox

За всю историю CSS правильное выравнивание по обеим осям казалось самой сложной проблемой. Появление этой функции во Flexbox для многих стало главным преимуществом этой технологии. Выравнивание свелось к двум строчкам CSS.

Свойства выравнивания теперь полностью определены в спецификации Box Alignment. Она детализирует, как работает выравнивание в различных макетах. Это означает, что в CSS Grid можно использовать те же свойства, что и в Flexbox — а в будущем в других макетах тоже. Поэтому любая новая функция выравнивания Flexbox будет подробно описана в спецификации Box Alignment, а не в следующей версии Flexbox.

Свойства

Многим трудно запомнить, следует ли использовать свойства, которые начинаются с align- или с justify- . Важно помнить следующее:

• justify- выполняет выравнивание по главной оси в том же направлении, что и flex-direction ;
• align- выполняет выравнивание по оси поперёк направлению flex-direction .

Здесь действительно помогает мышление с точки зрения главной и поперечной осей, а не горизонтальной и вертикальной. Не имеет значения, как физически направлена ось.

Выравнивание главной оси с помощью justify-content

Начнём с выравнивания по главной оси. Оно осуществляется с помощью свойства justify-content . Данное свойство обрабатывает все элементы как группу и управляет распределением пространства между ними.

Изначальное значение justify-content равняется flex-start . Вот почему при объявлении display: flex все элементы flex выстраиваются в начале строки. В письменности слева направо элементы группируются слева.

Обратите внимание, что свойство justify-content производит видимый эффект только при наличии свободного места. Поэтому если у вас набор элементов занимает всё пространство на главной оси, justify-content ничего не даст.

Если указать для justify-content значение flex-end , то все элементы переместятся в конец строки. Свободное место теперь находится в начале.

С этим пространством можно делать и другие вещи. Например, распределить его между нашими элементами, используя justify-content: space-between . В этом случае первый и последний элемент разместятся на концах контейнера, а всё пространство поровну поделится между элементами.

Мы можем распределить пространство с помощью justify-content: space-around . В этом случае доступное пространство делится на равные части и помещается с каждой стороны элемента.

Новое значение justify-content можно найти в спецификации Box Alignment; оно не указано в спецификации Flexbox. Это значение space-evenly . В этом случае элементы равномерно распределяются в контейнере, а дополнительное пространство поровну распределяется между элементами и с обеих сторон.

Вы можете поиграться со всеми значениями в демо.

Значения точно так же работают по вертикали, то есть если flex-direction применяется для column . Правда, у вас в столбце может не оказаться свободного места для распределения, если не добавить высоту или block-size контейнера, как в этом демо.

Выравнивание по осям с помощью align-content

Если в контейнере несколько осей и указано flex-wrap: wrap , то можно использовать align-content для выравнивания строк на поперечной оси. Но требуется дополнительное пространство. В этой демонстрации поперечная ось работает в направлении колонки, и я указала высоту контейнера 60vh . Поскольку это больше, чем необходимо для отображения всех элементов, то появляется свободное пространство по вертикали.

Затем я могу применить align-content с любым из значений.

Если в качестве flex-direction указано column , то align-content работает как в следующем примере.

Как и в случае с justify-content , мы работаем с группой строк и распределяем свободное пространство.

Свойство по place-content

В спецификации Box Alignment можно найти свойство place-content . Использование этого свойства означает, что вы одновременно устанавливаете justify-content и align-content . Первое значение — для align-content , второе для justify-content . Если задано только одно значение, то оно применяется к обоим свойствам:

Выравнивание по осям с помощью align-items

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

Как вариант, её можно определить свойством height в контейнере:

Почему элементы растягиваются до размера самого высокого элемента — это потому что начальным значением параметра align-items является stretch . Элементы растягиваются по поперечной оси до размера контейнера в этом направлении.

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

Кроме начального значения stretch , можно присвоить элементам align-items значение flex-start , в этом случае они выравниваются по началу контейнера и больше не растягиваются по высоте.

Значение flex-end перемещает их в конец контейнера по поперечной оси.

Если вы используете значение center , то элементы центрируются относительно друг друга:

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

Все эти варианты можно попробовать в демо.

Индивидуальное выравнивание с помощью align-self

Свойство align-items задаёт выравнивание всех элементов одновременно. В действительности оно устанавливает значения align-self для всех элементов группы. Можно также использовать свойство align-self для любого отдельного элемента, чтобы выровнять его внутри строки и относительно других элементов.

В следующем примере в контейнере используется align-items для выравнивания всей группы по центру, но также align-self для первого и последнего элементов.

Почему нет justify-self ?

Часто возникает вопрос, почему невозможно выровнять один элемент или группу элементов по главной оси. Почему во Flexbox нет свойства -self для выравнивания по главной оси? Если вы представите justify-content и align-content как способ распределения пространства, то ответ становится более очевидным. Мы имеем дело с элементами как с группой и размещаем свободное пространство определённым образом: либо в начале, либо в конце группы, либо между элементами.

Также может быть полезно подумать, как justify-content и align-content работают в CSS Grid Layout. В Grid эти свойства используются для распределения свободного пространства в grid-контейнере между grid-дорожками. Здесь тоже мы берём группу дорожек — и с помощью этих свойств распределяем между ними свободное пространство. Поскольку мы оперируем в группе и в Grid, и во Flexbox, то не можем взять отдельный элемент и сделать с ним что-то другое. Тем не менее, есть способ получить оформление макета, которое хотят верстальщики, когда говорят о свойстве self на главной оси. Это использование автоматических полей.

Использование автоматических полей на основной оси

Если вы когда-нибудь центрировали блок в CSS (например, враппер для контента главной страницы, установив поля слева и справа в auto ), то у вас уже есть некоторый опыт работы с автоматическими полями. Значение auto для полей заполняет максимальное пространство в установленном направлении. Для центрирования блока мы устанавливаем и левое, и правое поля в auto : каждое из них пытается занять как можно больше места, и поэтому помещает наш блок в центр.

Автоматические поля очень хорошо работают во Flexbox для выравнивания отдельных элементов или групп элементов на главной оси. В следующем примере показан типичный случай. Есть панель навигации, элементы отображаются в виде строки и используют начальное значение justify-content: start . Я хочу, чтобы последний пункт отображался отдельно от других в конце строки — при условии, что в строке достаточно места для этого.

Берём этот элемент и указываем для свойства margin-left значение auto . Это значит, что поле пытается получить как можно больше места слева от элемента, то есть элемент выталкивается к правой границе.

Если вы используете автоматические поля на главной оси, то justify-content перестанет действовать, так как автоматические поля займут всё пространство, которое в противном случае распределялось бы с помощью justify-content .

Запасное выравнивание

Для каждого метода выравнивания описан запасной вариант — что произойдёт, если заданное выравнивание невозможно. Например, если у вас есть только один элемент в контейнере, а вы указали justify-content: space-between , что должно произойти? В этом случае применяется запасное выравнивание flex-start — один элемент будет выровнен по началу контейнера. В случае justify-content: space-around используется запасное выравнивание center .

В текущей спецификации вы не можете изменить запасное выравнивание. Есть примечание к спецификациям, которое допускает возможность указания произвольного запасного варианта в будущих версиях.

Безопасное и небезопасное выравнивание

Недавним дополнением к спецификации Box Alignment стала концепция безопасного и небезопасного выравнивания с использованием ключевых слов safe и unsafe.

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

Безопасное выравнивание предотвращает потерю данных, перемещая переполнение на другую сторону.

Эти ключевые слова пока поддерживаются не всеми браузерами, однако демонстрируют, как спецификации Box Alignment добавляют контроля во Flexbox.

Заключение

Свойства выравнивания начинались со списка в Flexbox, но теперь обзавелись собственной спецификацией и применяются к другим контекстам макетирования. Вот несколько ключевых фактов, которые помогут запомнить их использование во Flexbox:

• justify- для основных осей, а align- для поперечных;
• для align-content и justify-content требуется свободное пространство;
• свойства align-content и justify-content применяются к элементам в группе, распределяя пространство между ними. Нельзя указывать выравнивание отдельного элемента, потому что свойство -self отсутствует;
• если хотите выровнять один элемент или разбить группу по основной оси, используйте автоматические поля;
• align-items устанавливает одинаковые свойства align-self для всей группы. Используйте align-self для дочернего элемента группы, чтобы установить ему значение индивидуально.

Источник