Align self: align-self | CSS | WebReference – Свойство align-self | CSS справочник

Leave a Comment / Разное / By /

align-self | CSS | WebReference

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

Краткая информация

Значение по умолчаниюauto
НаследуетсяНет
ПрименяетсяК флекс-элементу
АнимируетсяНет

Синтаксис ?

align-self: auto | flex-start | flex-end | center | baseline | stretch

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#
×

Значения

auto
Берёт родительское значение align-items или stretch, если нет родителя.
flex-start
Элемент выравнивается в начале поперечной оси контейнера.
flex-end
Элемент выравнивается в конце поперечной оси контейнера.
center
Элемент выравнивается по центральной линии на поперечной оси.
baseline
Элемент выравнивается по базовой линии текста.
stretch
Элемент растягивается таким образом, чтобы занять всё свободное пространство контейнера по поперечной оси.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>align-items</title>
  <style>
   .flex-container {
    display: flex;
    align-items: flex-start;
    height: 160px; /* Высота контейнера */
   }
   .flex-item {
    margin-left: 1rem; /* Расстояние между блоками */
    padding: 10px; /* Поля вокруг текста */
    width: 33.333%; /* Ширина блоков */
   }
   .flex-item:first-child { margin-left: 0; }
   .flex-item:hover { 
     align-self: stretch; /* Растягиваем при наведении */
   }
   .item1 { background: #F0BA7D; }
   .item2 { background: #CAE2AA; }
   .item3 { background: #A6C0C9; }
  </style>
 </head> 
 <body>
  <div>
   <div>
    Фенек — лисица, живущая в пустынях Северной Африки. 
    Имеет достаточно миниатюрный размер и своеобразную внешность 
    с большими ушами.
   </div>
   <div>
    Корсак — хищное млекопитающее рода лисиц.
   </div>
   <div>
    Лисица — хищное млекопитающее семейства псовых, 
    наиболее распространённый и самый крупный вид рода лисиц.
   </div>
  </div>
 </body>
</html>

Объектная модель

Объект.style.alignSelf

Примечание

Safari до версии 9 поддерживает свойство -webkit-align-self.

Спецификация ?

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.
×

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 23.09.2019

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

Свойство align-self | CSS справочник

CSS свойства

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

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.

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

CSS синтаксис:

/* флекс элементы */
align-self: "auto | stretch | center | flex-start | flex-end | baseline | initial | inherit";

/* элементы сетки*/
align-self: "auto | stretch | center | start | end | baseline | initial | inherit";

JavaScript синтаксис:

object.style.alignSelf = "auto"

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

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

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Нет.

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

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования свойства align-self (для флекс элементов)</title>
<style>
.container {
    display: -webkit-flex;  /* для поддержки ранних версий браузеров */
    display: flex;  /* элемент отображается как блочный flex-контейнер */
    height: 300px;  /* устанавливаем высоту контейнера */
    background: bisque;  /* устанавливаем цвет заднего фона */
    -webkit-align-items: center;  /* для поддержки ранн

align-self | CSS справочник

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

11.0+ 20.0+ 21.0+ 12.1+ 9.0+

Описание

CSS свойство align-self указывает, каким образом будет выравниваться flex-элемент по вертикали, внутри flex-контейнера. Оно работает аналогично свойству align-items, отличие заключается в том, что align-items применяется ко всем элементам и задаётся для flex-контейнера. А align-self применяет к конкретному элементу.

Примечание: align-self переопределяет выравнивание для данного flex-элемента, заданное свойством align-items.

Значение по умолчанию: auto
Применяется:
к flex-элементам
Анимируется: нет
Наследуется: нет
Версия: CSS3
Синтаксис JavaScript: object.style.alignSelf=»center»;

Синтаксис

align-self: auto|stretch|center|flex-start|flex-end|baseline;

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

Значение Описание
auto Значение по умолчанию. Указывает, что значение наследуется от свойства align-items.
stretch flex-элемент растягивается, занимая всю доступную высоту.

Примечание: если у элемента определено свойство max-height, то заданная максимальная высота не изменяется. В этом случае элемент занимает заданную ему высоту и располагается по верхней границе контейнера.
center flex-элемент располагается по центру контейнера, имея одинаковые отступы сверху и снизу.

Примечание: если flex-элемент занимает больше вертикального пространства, чем высота контейнера, то элемент сместится так, чтобы переполнение было одинаковым сверху и снизу.
flex-start flex-элемент располагается по верхней границе контейнера.
flex-end flex-элемент располагается по нижней границе контейнера.
baseline Элемент позиционируется в соответствие с базовой линией контейнера.

Пример

Красный

Синий

Зеленый div с дополнительным контентом.

div#myBlueDiv {
align-self: auto;
}

align-self. CSS свойство выравнивающее элементы

CSS свойство align-self, выравнивает flex-элементы текущей строки, заменяя значение align-items.

Safari до 9й версии поддерживает свойство -webkit-align-self.

Краткая информация по CSS-свойству align-self

Значение по умолчаниюstretch
НаследуетсяНет
ПрименяетсяК flex-контейнеру
АнимируетсяНет

Правила написания свойства align-self

align-self: auto | flex-start | flex-end | 
            center | baseline | stretch
auto

Используется родительское значение align-items или stretch, если нет родителя.

flex-start

Элемент выравнивается в начале поперечной оси контейнера.

flex-end

Элемент выравнивается в конце поперечной оси контейнера.

center

Элемент выравнивается по центральной линии на поперечной оси.

baseline

Элемент выравнивается по базовой линии текста.

stretch

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

Объектная модель

Объект.style.alignSelf

Пример применения стиля align-self

Проиллюстрируем работу align-self на примере. Будем растягивать наши блоки при наведении на них курсора мыши:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Пример с align-self</title>
  <style>
  .flex-container {
    display: flex;
    align-items: flex-start;
    height: 160px; /* Высота контейнера */
   }
   .flex-item {
    margin-left: 1rem; /* Расстояние между блоками */
    padding: 10px; /* Поля вокруг текста */
    width: 33.333%; /* Ширина блоков */
   }
   .flex-item:hover { 
     align-self: stretch; /* Растягиваем при наведении */
   }
   .item1 { background: #F0BA7D; }
   .item2 { background: #CAE2AA; }
   .item3 { background: #A6C0C9; }
  </style>
 </head> 
 <body>
  <div>
   <div>
    Есть ли какие нибудь JS библиотеки которые помогут IE 9 и 
    более поздним версиям понять это свойство Flexbox?
   </div>
   <div>
    Решил использовать flexbox в проектах.
   </div>
   <div>
    На самом деле это всего лишь малая часть того, 
    что можно реализовать на FlexBox.
   </div>
  </div>
 </body>
</html>
Применение свойства align-self

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *