Css align self: align-self — Web technology for developers

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

basicweb.ru

• HTML
  • Учебник HTML
  • Справочник тегов
  • Атрибуты событий
  • Глобальные атрибуты
  • Коды языков
  • Мнемоники
  • Цвета
  • Тесты знаний
• CSS
  • Учебник CSS
  • Справочник свойств
  • Селекторы
  • Функции
  • Правила
  • Flexbox генератор
  • Grid генератор
  • Учебник LESS
• JavaScript
  • Интерфейсы веб API
  • Объект Array
  • Объект Date
  • Объект Function
  • Объект Global
  • Объект JSON
  • Объект Math
  • Объект Number
  • Объект Object
  • Объект RegExp
  • Объект Promise
  • Объект String
• jQuery
  • Селекторы
  • События
  • Методы DOM
  • Перемещения
  • Утилиты
  • Эффекты
  • AJAX
  • Объект Callbacks
  • Объект Deferred

HTML

• 
  HTML учебник

Свойство align-self — выравнивание по поперечной оси для отдельно взятого flex-блока

Свойство align-self задает выравнивание вдоль поперечной
оси для отдельно взятого flex-блока. По сути align-self — это свойство
align-items,
но для конкретного блока.

Синтаксис

селектор {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Значения

Значение	Описание
flex-start	Блок прижат к началу поперечной оси.
flex-end	Блок прижат к концу поперечной оси.
center	Блок стоит по центру поперечной оси.
baseline	Блок выравнивается по своей базовой линии. Базовая линия (англ. baseline, или линия шрифта) — это воображаемая линия, проходящая по нижнему краю символов без учета свисаний, например, как у букв ‘ц’, ‘д’, ‘р’, ‘щ’.
stretch	Блок растянут, занимая все доступное место по поперечной оси, при этом все же учитываются min-width и max-width, если они заданы. Если же задана ширина и высота для элемента — stretch будет проигнорирован.
auto	Блок будет выровнен так, как задано в свойстве align-items.

Значение по умолчанию: auto.

Пример . Значение stretch

В данном примере всем блокам задано значение flex-start
(свойство align-items),
а третьему блоку — align-self в значении stretch:

<div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: flex;
align-items: flex-start;
flex-direction: row;
border: 1px solid #696989;
height: 100px;
}
#parent > div {
min-width: 100px;
border: 1px solid #696989;
}
#elem {
align-self: stretch;
}

:

Пример . Значение flex-end

В данном примере всем блокам для свойства align-items
задано значение flex-start, а третьему блоку — align-self в значении flex-end:

<div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: flex;
align-items: flex-start;
flex-direction: row;
border: 1px solid #696989;
height: 100px;
}
#parent > div {
min-width: 100px;
border: 1px solid #696989;
}
#elem {
align-self: flex-end;
}

:

Смотрите также

• свойство flex-direction,
  которое задает направление осей flex блоков
• свойство justify-content,
  которое задает выравнивание по главной оси
• свойство align-items,
  которое задает выравнивание по поперечной оси
• свойство flex-wrap,
  которое многострочность flex блоков
• свойство flex-flow,
  сокращение для flex-direction и flex-wrap
• свойство order,
  которое задает порядок flex блоков
• свойство align-self,
  которое задает выравнивание одного блока
• свойство flex-basis,
  которое задает размер конкретного flex блока
• свойство flex-grow,
  которое задает жадность flex блоков
• свойство flex-shrink,
  которое задает сжимаемость flex блоков
• свойство flex,
  сокращение для flex-grow, flex-shrink и flex-basis

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;

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

Пример

Красный

Синий

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

div#myBlueDiv {
align-self: auto;
}

Выравнивание элементов. align-items и align-self

Выравнивание элементов. align-items и align-self

Последнее обновление: 18.04.2017

Свойство align-items

Свойство align-items также выравнивает элементы, но уже по поперечной оси (cross axis) (при расположении в виде строки по вертикали, при расположении в виде столбца — по горизонтали).
Это свойство может принимать следующие значения:

• stretch: значение по умолчанию, при котором flex-элементы растягиваются по всей высоте (при расположении в строку) или по всей ширине
  (при расположении в столбик) flex-контейнера

• flex-start: элементы выравниваются по верхнему краю (при расположении в строку) или по левому краю
  (при расположении в столбик) flex-контейнера

• flex-end: элементы выравниваются по нижнему краю (при расположении в строку) или по правому краю
  (при расположении в столбик) flex-контейнера

• center: элементы выравниваются по центру flex-контейнера

• baseline: элементы выравниваются в соответствии со своей базовой линией

Выравнивание при расположении в строку:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Flexbox в CSS3</title>
        <style>
			
			. flex-container {
				display: flex;
				border:1px #ccc solid;
				height:5em;
			}
			.flex-start{
				align-items: flex-start;
			}
			.flex-end{
				align-items: flex-end;
			}
			.center{
				align-items: center;
			}
			.baseline{
				align-items: baseline;
			}
			.flex-item {
				text-align:center;
				font-size: 1em;
				padding: 1.2em;
				color: white;
				
			}
			.largest-item{ 
				padding-top:2em;
			}
			.color1 {background-color: #675BA7;}
			.color2 {background-color: #9BC850;}
			.color3 {background-color: #A62E5C;}
			.color4 {background-color: #2A9FBC;}
        </style>
    </head>
    <body>
		<h4>Flex-start</h4>
		<div>
			<div>Flex Item 1</div>
			<div>Flex Item 2</div>
			<div>Flex Item 3</div>
			<div>Flex Item 4</div>
		</div>
		<h4>Flex-end</h4>
		<div>
			<div>Flex Item 1</div>
			<div>Flex Item 2</div>
			<div>Flex Item 3</div>
			<div>Flex Item 4</div>
		</div>
		<h4>Center</h4>
		<div>
			<div>Flex Item 1</div>
			<div>Flex Item 2</div>
			<div>Flex Item 3</div>
			<div>Flex Item 4</div>
		</div>
		<h4>Baseline</h4>
		<div>
			<div>Flex Item 1</div>
			<div>Flex Item 2</div>
			<div>Flex Item 3</div>
			<div>Flex Item 4</div>
		</div>
</html>

Аналогично свойство работает при расположении в столбик. Например, изменим стили flex-контейнера следующим образом:

.flex-container {
	display: flex;
	border:1px #ccc solid;
	flex-direction:column;
	width:12em;
}

Свойство align-self

Свойство align-self позволяет переопределить значение свойства align-items для одного элемента.
Оно может принимать все те же значения плюс значение «auto»:

• auto: значение по умолчанию, при котором элемент получает значение от свойства align-items, которое определено
  в flex-контейнере. Если в контейнере такой стиль не определен, то применяется значение stretch.

• stretch

• flex-start

• flex-end

• center

• baseline

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Flexbox в CSS3</title>
        <style>
			. flex-container {
				display: flex;
				border:1px #ccc solid;
				justify-content: space-between;
				align-items: stretch;
				height:12em;
			}
			.flex-item {
				text-align:center;
				font-size: 1em;
				padding: 1.2em;
				color: white;
			}
			.item1 {background-color: #675BA7; align-self: center; }
			.item2 {background-color: #9BC850; align-self: flex-start;}
			.item3 {background-color: #A62E5C; align-self: flex-end;}
			.item4 {background-color: #2A9FBC; align-self: center;}
        </style>
    </head>
    <body>
		<h4>Align-self</h4>
		<div>
			<div>Flex Item 1</div>
			<div>Flex Item 2</div>
			<div>Flex Item 3</div>
			<div>Flex Item 4</div>
		</div>
</html>

Здесь для flex-контейнера задано растяжение по высоте с помощью значения align-items: stretch;. Однако каждый из элементов переопределяет это поведение:

Одной строкой: новые CSS-команды для фронтендов

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

Юна Кра­вец, раз­ра­бот­чик в Chrome, запи­са­ла видео, где она пока­зы­ва­ет 10 совре­мен­ных CSS-команд. Мы раз­бе­рём пять из них. Если вы зна­е­те англий­ский, то луч­ше посмот­ри­те ролик, а за при­ме­ра­ми при­хо­ди­те к нам.

👉 Это мате­ри­ал для тех, кто зани­ма­ет­ся вёрст­кой веб-страниц и веб-приложений, при­чём на сред­нем таком уровне. Если для вас тут поло­ви­на непо­нят­на, нач­ни­те с простого:

Что такое CSS

Сер­ви­сы гене­ра­ции CSS-кода

👉 Grid и Flex

Что­бы вся эта магия рабо­та­ла пра­виль­но, мы будем исполь­зо­вать её парал­лель­но с коман­да­ми display: grid; и display: flex

display: grid — это когда мы гово­рим бра­у­зе­ру, что эле­мен­ты в этом кон­тей­не­ре будут раз­ме­щать­ся внут­ри вир­ту­аль­ной сет­ки. И внут­ри этой сет­ки мы можем зада­вать раз­ные пра­ви­ла, кото­рые и дела­ют совре­мен­ную CSS-разработку про­ще, чем раньше.

Display: flex — это зна­чит, что всё содер­жи­мое кон­тей­не­ра может гиб­ко менять свои раз­ме­ры по ширине или высо­те, под­стра­и­ва­ясь под содержимое.

Суперцентрирование

Самой боль­шой про­бле­мой в CSS все­гда было раз­ме­ще­ние эле­мен­тов точ­но по цен­тру. Для это­го при­хо­ди­лось писать что-то такое:

justify-self: center

justify-content: center

justify-items: center

align-self: center

align-content: center

align-items: center

line-height: 100%

text-align: center

margin: auto auto

vertical-align: middle

Но даже такой избы­точ­ный код ино­гда не давал нуж­ных резуль­та­тов, и эле­мен­ты всё рав­но рас­по­ла­га­лись не стро­го по цен­тру. Теперь всё это мож­но заме­нить одной коман­дой place-items: center. Её нуж­но ска­зать роди­тель­ско­му эле­мен­ту (то есть тому, внут­ри кото­ро­го всё долж­но центроваться):

.parent {

    display: grid;

    place-items: center;

  } 

Для при­ме­ра сде­ла­ем блок с изме­ня­е­мым содер­жи­мым, а внут­ри него по цен­тру поме­стим над­пись «При­вет, это Код!». Если мы изме­ним раз­мер глав­но­го бло­ка, то содер­жи­мое авто­ма­ти­че­ски подви­нет­ся в нуж­ное место и сно­ва ока­жет­ся в цен­тре блока.

See the Pen 
01. Centered AF by Миха­ил Поля­нин (@mihail-polqnin)
on CodePen.

Подвижные карточки

В интернет-магазинах часто мож­но встре­тить това­ры, оформ­лен­ные в виде кар­то­чек — 3 или 4 в ряд. Про­бле­ма в том, что если открыть эту стра­ни­цу на малень­ком экране, то кар­точ­ки рас­тя­нут­ся на всю шири­ну и постро­ят­ся одна под дру­гой, хотя сво­бод­но­го места хва­тит, напри­мер, на 2 карточки.  

Что­бы сде­лать так, что­бы кар­точ­ки все­гда зани­ма­ли столь­ко места, сколь­ко им нуж­но, но при этом не рас­тя­ги­ва­лись вширь на боль­ших экра­нах, исполь­зу­ют коман­ду flex: 0 1 <baseWidth>:

.box {

  flex: 0 1 150px; /* Задаём ширину карточки */

  margin: 5px;

}

Рабо­та­ет она так: если кон­тей­нер, в кото­ром лежат кар­точ­ки, рас­тя­ги­ва­ет­ся широ­ко, то кар­точ­ки не рас­тя­ги­ва­ют­ся вме­сте с ним, а оста­ют­ся нуж­ной шири­ны — baseWith. Когда мы умень­ша­ем раз­мер кон­тей­не­ра, то кар­точ­ки оста­ют­ся той же шири­ны, но рас­по­ла­га­ют­ся уже в несколь­ко строк друг под дру­гом. Если кон­тей­нер ста­нет совсем малень­ким, то кар­точ­ки выстро­ят­ся в одну вер­ти­каль­ную колонку.

Если нуж­но, что­бы кар­точ­ки по ширине рас­тя­ги­ва­л

Свойства flex-элементов — align-self и order от Loftblog

Очень рады снова пообщаться с вами. Сегодня вашему вниманию будет представлен пятый видеоурок курса по Flexbox. На нем мы рассмотрим еще несколько свойств flex-элементов,научимся управлять их местоположением и выводом. Это занятие очень легкое и очень интересное! Представьте, вы можете менять вывод блоков сайта как вашей душе угодно только в CSS, без правки HTML, PHP или какого-либо другого кода.

Свойство flex-элементов — align-self

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

Свойство flex-элементов — order

Еще одно свойство, которое будет рассмотрено на сегодняшнем видеоуроке, отвечает за последовательность расположения flex-элементов на HTML-страничке. Это свойство order. По умолчанию все flex-элементы имеют значение этого свойства, равное 0. Чем больше значение order у flex-элемента, тем позднее будет выводиться этот элемент на HTML-страницу по сравнению с соседними.

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

Приятного всем просмотра! Учитесь с удовольствием! Всегда ваш Loftblog.

Автор видеокурса – Сергей Михалевич
https://www.youtube.com/c/Master-CSS

Плейлист Flexbox CSS:
http://www.youtube.com/playlist?list=PLY4rE9dstrJzj68Y8SlQlhIdb5hbGQLIU

Рекомендуемые курсы

align-self — Веб-технологии для разработчиков

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

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.

Свойство не применяется к блокам уровня блока или к ячейкам таблицы. Если поле для поперечной оси элемента Flexbox равно auto , то align-self игнорируется.

Синтаксис

 / * Значения ключевых слов * /
align-self: auto;
align-self: нормальный;

/ * Позиционное выравнивание * /
/ * align-self не принимает значения left и right * /
align-self: center; / * Поместите элемент по центру * /
align-self: start; / * Помещаем элемент в начало * /
выровнять себя: конец; / * Помещаем элемент в конец * /
align-self: самозапуск; / * Выровнять элемент заподлицо в начале * /
выровнять себя: самоконец; / * Выровняйте элемент заподлицо в конце * /
align-self: гибкий старт; / * Поместите гибкий элемент в начало * /
align-self: гибкий конец; / * Поместите гибкий элемент в конец * /

/ * Базовое выравнивание * /
align-self: базовая линия;
align-self: первая базовая линия;
align-self: последняя базовая линия;
выровнять себя: растянуть; / * Растягиваем элементы с автоматическим размером, чтобы они поместились в контейнер * /

/ * Выравнивание переполнения * /
align-self: безопасный центр;
align-self: небезопасный центр;

/ * Глобальные значения * /
выровнять себя: наследовать;
align-self: начальный;
align-self: отключено; 

Значения

авто

Вычисляет значение родительского элемента align-items .

нормальный

Эффект этого ключевого слова зависит от режима макета, в котором мы находимся:

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

самозапуск

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

саморез

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

гибкий старт

Край поперечного поля гибкого элемента совмещается с поперечным краем линии.

гибкий конец

Край поперечного поля гибкого элемента совмещен с поперечным краем линии.

центр

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

базовый план
первый базовый план
последний базовый план

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

растяжка

Если общий размер элементов вдоль поперечной оси меньше размера контейнера выравнивания, а размер элемента авто , его размер увеличивается одинаково (не пропорционально), при этом соблюдаются ограничения, налагаемые максимумом . -height / max-width (или эквивалентная функциональность), так что объединенный размер всех элементов auto -size точно заполняет контейнер выравнивания вдоль поперечной оси.

сейф

Если размер элемента выходит за пределы контейнера выравнивания, элемент вместо этого выравнивается, как если бы режим выравнивания был start .

небезопасно

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

Формальное определение

CSS justify-self



<стиль>
#grid {
дисплей: сетка;
сетка-шаблон-столбцы: 1fr;
сетка-шаблон-строки: 1fr 1fr 1fr;
сетка-пробел: 10 пикселей;
justify-items: center;
цвет фона: бежевый;
}

#grid> div {
отступ: 20 пикселей;
размер шрифта: 4vw;
белый цвет;
ширина: 20%;
}
.красный {
фон: оранжево-красный;
оправдать себя: конец;
}
.green {
фон: желто-зеленый;
}
.blue {
фон: стально-голубой;
оправдать себя: начало;
}


Свойство CSS justify-self выравнивает прямоугольник внутри содержащего его блока по оси inline / row / main.

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

Синтаксис

авто | нормальный | растянуть | <базовая позиция> | [<положение-переполнения>? && <самопозиция>]

Эти значения объясняются ниже.

Возможные значения

авто

Использует значение, предоставленное свойством justify-items в родительском контейнере. Если у элемента нет родителя, то это значение равно нормальному .

нормальный

Представляет выравнивание "по умолчанию" для режима макета.

растяжка

Элементы растянуты, например, поперечный размер поля поля элемента совпадает с размером строки, но при этом соблюдаются ограничения min-height , min-width , max-height и max-height .

исходное положение

<базовая позиция> = [первая | прошлой ]? исходный

Значения первых и последних задают для блока предпочтение базового выравнивания. Значение по умолчанию - , первые .

Значений:

базовый

Вычисляет для первой базовой линии .

первый базовый

Выравнивает базовую линию выравнивания первого набора базовых линий блока с соответствующей базовой линией контекста выравнивания. Резервное выравнивание для первого базового - начало .

последний базовый показатель

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

положение переполнения

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

сейф

Если размер объекта выравнивания выходит за пределы контейнера выравнивания, объект выравнивания вместо этого выравнивается, как если бы режим выравнивания был start .

небезопасно

Заданное значение выравнивания соблюдается независимо от относительных размеров объекта выравнивания и контейнера выравнивания.

самостоятельное положение

<самопозиция> = центр | начало | конец | самозапуск | самоконец | гибкий старт | гибкий конец | слева | верно;

Возможные значения:

центр

Центрирует объект выравнивания в его контейнере выравнивания.

начало

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

конец

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

самозапуск

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

саморез

Выравнивает объект выравнивания заподлицо с краем контейнера выравнивания, соответствующим торцевой стороне объекта выравнивания по соответствующей оси.

слева

Выравнивает объект выравнивания заподлицо с левым краем линии контейнера. Если ось свойства не параллельна встроенной оси, это значение будет вести себя как start .

правый

Выравнивает объект выравнивания заподлицо с линией правого края контейнера выравнивания. Если ось свойства не параллельна встроенной оси, это значение будет вести себя как start .

гибкий старт

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

гибкий конец

Используется только в гибкой компоновке.Край поперечного поля гибкого элемента располагается заподлицо с поперечным краем линии.

Кроме того, все свойства CSS также принимают следующие значения ключевых слов всего CSS в качестве единственного компонента своего значения свойства:

начальный

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

наследовать

Представляет вычисленное значение свойства родительского элемента.

снято

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

Основная информация об имуществе

Начальное значение

авто

Относится к

Блоки уровня блока, блоки с абсолютным позиционированием и элементы сетки

Унаследовано?

Нет

Медиа

Визуальный

Расчетное значение

Указанное значение

Анимационный

Нет

Пример кода

Базовый CSS

.flex-container {
дисплей: гибкий;
justify-items: гибкий старт;
}

.flex-item-1 {
оправдать себя: центр;
}

Рабочий пример в HTML-документе

В этом примере используется сетка CSS. Он выравнивает элементы сетки в контейнере сетки.



<стиль>
#grid {
дисплей: сетка;
сетка-шаблон-столбцы: 1fr;
сетка-шаблон-строки: 1fr 1fr 1fr;
сетка-пробел: 10 пикселей;
justify-items: center;
цвет фона: бежевый;
}

#grid> div {
отступ: 20 пикселей;
размер шрифта: 4vw;
белый цвет;
ширина: 20%;
}
.красный {
фон: оранжево-красный;
оправдать себя: конец;
}
.green {
фон: желто-зеленый;
}
.blue {
фон: стально-голубой;
оправдать себя: начало;
}


Попробуй

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

Свойство justify-self определено в модуле выравнивания блока CSS уровня 3 (рабочий проект W3C).

Префиксы поставщиков

Для максимальной совместимости с браузером многие веб-разработчики добавляют свойства браузера, используя такие расширения, как -webkit- для Safari, Google Chrome и Opera (более новые версии), -ms- для Internet Explorer, -moz- для Firefox, -o- для более старых версий Opera и т. д. Как и в случае любого свойства CSS, если браузер не поддерживает проприетарное расширение, он просто проигнорирует его.

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

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

Многие разработчики используют Autoprefixer, постпроцессор для CSS. Autoprefixer автоматически добавляет префиксы поставщиков в ваш CSS, поэтому вам это не нужно. Он также удаляет старые ненужные префиксы из вашего CSS.

Вы также можете использовать Autoprefixer с препроцессорами, такими как Less и Sass.

CSS Box Alignment Module, уровень 3

CSS Box Alignment Module, уровень 3

Абстрактные

Этот модуль содержит функции CSS, относящиеся к выравниванию блоков внутри их контейнеров в различных моделях макета блоков CSS: макет блока, макет таблицы, макет гибкости и макет сетки. (Выравнивание текста и содержимого на уровне строки определяется в [CSS-TEXT-3] и [CSS-INLINE-3].)

CSS - это язык для описания отображения структурированных документов.
(например, HTML и XML)
на экране, на бумаге и т. д.

Статус этого документа

В этом разделе описывается статус этого документа на момент
его публикация. Другие документы могут заменять этот документ. Список
текущие публикации W3C и последняя редакция этого технического отчета
можно найти в технических отчетах W3C
индекс на https://www.w3.org/TR/.

Публикация

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

Вопросы GitHub являются предпочтительными для обсуждения этой спецификации.
При заполнении вопроса, пожалуйста, поместите текст «css-align» в заголовок,
желательно так:
«[Css-align] … сводка комментария… ».
Все вопросы и комментарии архивируются,
а также исторический архив.

Этот документ был разработан Рабочей группой CSS.

Этот документ был подготовлен группой, действующей в соответствии с Патентной политикой W3C.
W3C ведет публичный список любых раскрытий патентов, сделанных в
связь с результатами группы; эта страница также включает
инструкция по раскрытию патента. Лицо, имеющее фактическое
знание патента, который, по мнению человека, содержит существенные
В претензии (-ях) должна быть раскрыта информация в соответствии с разделом
6 Патентной политики W3C.

Этот документ регулируется документом W3C от 1 марта 2019 года.

Следующие функции подвержены риску и могут быть отключены в течение периода CR:

«Под угрозой» - это термин, применяемый в процессе W3C, и это не обязательно означает, что функция находится под угрозой отказа или задержки. Это означает, что WG полагает, что функциональная совместимость этой функции может быть затруднена, и ее отметка как таковая позволяет WG отказаться от функции, если необходимо, при переходе к стадии Proposed Rec, без необходимости публиковать новую Candidate Rec без функция в первую очередь.

Содержание

1. 1. Введение
   1. 1.1 Взаимодействие модулей
   2. 1.2 Определения значений
   3. 1.3 Частичные реализации
2. 2 Обзор свойств выравнивания
3. 3 Терминология выравнивания
4. 4 ключевых слова выравнивания
   1. 4.1 Позиционное выравнивание: ключевые слова center, start, end, self-start, self-end, flex-start, flex-end, left и right
   2. 4.2 Базовое выравнивание: ключевое слово базовой линии и модификаторы first / last
   3. 4.3 Распределенное выравнивание: ключевые слова stretch, space-between, space-around и space-evenly
   4. 4.4 Выравнивание переполнения: безопасные и небезопасные ключевые слова и пределы безопасности прокрутки
5. 5 Распространение контента: выравнивание содержимого коробки внутри себя
   1. 5.1 Свойства justify-content и align-content
      1. 5.1.1 Блок-контейнеры (включая ячейки таблицы)
      2. 5.1.2 Многоцветные контейнеры
      3. 5.1.3 Гибкие контейнеры
      4. 5.1.4 Контейнеры сетки
   2. 5.2 Сокращение Content-Distribution: свойство place-content
   3. 5.3 Положения переполнения и прокрутки
   4. 5.4 Базовое выравнивание содержимого
6. 6 Самовыравнивание: выравнивание блока внутри его родительского элемента
   1. 6.1 Inline-Axis (или Main-Axis) Alignment: свойство justify-self
      1. 6.1.1 Блоки уровня блока
      2. 6.1.2 Ящики с абсолютным позиционированием
      3. 6.1.3 Ячейки таблицы
      4. 6.1.4 Гибкие элементы
      5. 6.1.5 Элементы сетки
   2. 6.2 Блочно-осевое (или поперечное) выравнивание: свойство align-self
      1. 6.2.1 Ящики блочного уровня
      2. 6.2.2 Ящики с абсолютным позиционированием
      3. 6.2.3 Ячейки таблицы
      4. 6.2.4 Гибкие элементы
      5. 6.2.5 Элементы сетки
   3. 6.3 Сокращение Self-Alignment: свойство place-self
   4. 6.4 Базовое самовыравнивание
   5. 6.5 Влияние на размер абсолютно позиционированных боксов со статическими вставками
7. 7 Выравнивание по умолчанию
   1. 7.1 Выравнивание по линейной оси (или главной оси): свойство justify-items
   2. 7.2 Блочно-осевое (или поперечное) выравнивание: свойство align-items
   3. 7.3 Сокращение Self-Alignment: свойство place-items
8. 8 промежутков между коробками
   1. 8.1 Промежутки между строками и столбцами: свойства зазора между строками и зазора между столбцами
   2. 8.2 Gap Сокращение: свойство gap
   3. 8.3 Устаревшие свойства зазора: свойства grid-row-gap, grid-column-gap и grid-gap
9. 9 Детали выравнивания базовой линии
   1. 9.1 Определение базовых линий коробки
   2. 9.2 Группировка базового выравнивания
   3. 9.3 Выравнивание прямоугольников по базовой линии
10. 10 Приложение A: Терминология статического положения
11. 11 Изменений
12. 12 Вопросы конфиденциальности и безопасности
13. Благодарности
14. Соответствие
    1. Условные обозначения в документе
    2. Классы соответствия
    3. Требования к ответственному внедрению CSS
       1. Частичные реализации
       2. Реализации нестабильных и проприетарных функций
       3. Реализации функций уровня CR
15. Индекс
    1. Термины, определенные в данной спецификации
    2. Термины, определенные ссылкой
16. Ссылки
    1. Нормативные ссылки
17. Индекс собственности
18. Указатель проблем

1.Введение

CSS-уровни 1 и 2 позволяют выравнивать текст с помощью выравнивания текста и выравнивать блоки с помощью автоматической балансировки полей.
Однако, за исключением ячеек таблицы,
вертикальное выравнивание было невозможно.
Поскольку CSS добавляет дополнительные возможности,
возможность выравнивать коробки по разным размерам становится все более важной.
Этот модуль пытается создать целостную и общую модель выравнивания блоков, которая будет использоваться всеми CSS.

Примечание. Выравнивание текста и содержимого на уровне строки определяется в [CSS-TEXT-3] и [CSS-INLINE-3].

Примечание: эта спецификация не предназначена для изменения какого-либо поведения
определены в CSS2.1, когда для определенных здесь свойств установлены их начальные значения.
Если разработчики или кто-либо другой заметят несоответствие,
пожалуйста, сообщите об этом в CSSWG как об ошибке.

Этот раздел (выше) не является нормативным.

1.1. Модуль взаимодействия

Этот модуль добавляет некоторые новые возможности выравнивания
к модели компоновки блока, описанной в [CSS2] главах 9 и 10, и определяет взаимодействие этих свойств
с выравниванием содержимого ячейки таблицы с помощью vertical-align,
как определено в [CSS2] главе 17.

Взаимодействие этих свойств с
Макет сетки [CSS-GRID-1] и макет гибкого блока [CSS-FLEXBOX-1] определяется в соответствующих модулях.
Определения свойств здесь заменяют определения в [CSS-FLEXBOX-1] (которые имеют меньшее раннее подмножество допустимых значений).

Никакие свойства в этом модуле не применяются к псевдоэлементам :: first-line или :: first-letter .

1.2. Определения значений

Эта спецификация следует соглашениям об определении свойств CSS из [CSS2] с использованием синтаксиса определения значений из [CSS-VALUES-3].Типы значений, не определенные в этой спецификации, определены в CSS Values ​​& Units [CSS-VALUES-3].
Комбинация с другими модулями CSS может расширить определения этих типов значений.

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

1,3. Частичные реализации

Поскольку ожидается, что поддержка функций в этом модуле
будут развертываться поэтапно в соответствии с различными затронутыми моделями компоновки,
Настоящим разъясняется, что
правила для частичных реализаций, которые требуют обработки как недопустимой любой неподдерживаемой функции
применить к любому ключевому слову выравнивания
который не поддерживается всеми модулями макета, к которым он применяется
для моделей компоновки, в которых реализация поддерживает свойство в целом.

Например,
если реализация поддерживает align-self в [CSS-GRID-1] и [CSS-FLEXBOX-1],
тогда он должен рассматривать start как недействительный
если он не поддерживается как в сетке, так и в гибких контейнерах.
Однако, если та же самая реализация вообще не поддерживает align-self для блочных элементов,
то отсутствие реализации align-self: start не вызывает это требование, чтобы считать его недействительным.

2. Обзор свойств выравнивания

Свойства выравнивания блока в CSS представляют собой набор из 6 свойств.
которые управляют выравниванием блоков внутри других блоков.Их можно описать по двум осям:

• , к каким размерам они относятся.

CSS Flexible Box Layout Module Level 1

CSS Flexible Box Layout Module Level 1

Абстрактные

Спецификация описывает блочную модель CSS, оптимизированную для дизайна пользовательского интерфейса. В модели гибкого макета дочерние элементы гибкого контейнера могут быть расположены в любом направлении и могут «сгибать» свои размеры, либо увеличиваясь, чтобы заполнить неиспользуемое пространство, либо сжимаясь, чтобы не переполнять родительский элемент.Как горизонтальное, так и вертикальное выравнивание детей можно легко изменить. Вложение этих ящиков (горизонтальное внутри вертикального или вертикальное внутри горизонтального) может использоваться для построения макетов в двух измерениях.

CSS - это язык для описания отображения структурированных документов.
(например, HTML и XML)
на экране, на бумаге и т. д.

Статус этого документа

В этом разделе описывается статус этого документа на момент его публикации.
Другие документы могут заменять этот документ.Список текущих публикаций W3C и последняя редакция этого технического отчета
можно найти в указателе технических отчетов W3C по адресу https://www.w3.org/TR/.

Этот документ был подготовлен рабочей группой CSS в качестве кандидата в рекомендацию. Этот документ призван стать Рекомендацией W3C.
Этот документ останется кандидатом в рекомендации по крайней мере до 19 декабря 2018 г. , чтобы
чтобы обеспечить возможность широкого обзора.

Вопросы GitHub являются предпочтительными для обсуждения этой спецификации.При регистрации проблемы, пожалуйста, поместите текст «css-flexbox» в заголовок,
желательно так:
«[Css-flexbox] … сводка комментария… ».
Все вопросы и комментарии архивируются,
а также исторический архив.

Предварительный
отчет о реализации доступен.

Публикация

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

Этот документ был подготовлен группой, работающей под
Патентная политика W3C.
W3C ведет публичный список любых раскрытий патентов, сделанных в связи с результатами работы группы;
эта страница также включает инструкции по раскрытию патента.
Лицо, имеющее фактические знания о патенте, который, по его мнению, содержит основные пункты формулы (-ий), должен раскрыть информацию в соответствии с разделом 6 Патентной политики W3C.

Этот документ регулируется Документом W3C от 1 февраля 2018 года.

Для изменений с момента последнего черновика,
см. раздел «Изменения».

Содержание

1. 1. Введение
   1. 1.1 Обзор
   2. 1.2 Взаимодействие модулей
2. 2 Модель Flex Layout Box и терминология
3. 3 гибких контейнера: значения для отображения гибкости и гибкости
4. 4 гибких элемента
   1. 4.1 Абсолютно позиционированные Flex Children
   2. 4.2 Поля и отступы гибкого элемента
   3. 4.3 Гибкий элемент Z-заказ
   4. 4.4 Свернутые элементы
   5. 4.5 Автоматический минимальный размер гибких элементов
5. 5 Заказ и ориентация
   1. 5.1 Flex Flow Direction: свойство flex-direction
   2. 5.2 Flex Line Wrapping: свойство flex-wrap
   3. 5.3 Flex Direction and Wrap: сокращение от flex-flow
   4. 5.4 Display Order: свойство order
      1. 5.4.1 Повторный заказ и доступность
6. 6 гибких линий
7. 7 Гибкость
   1. 7.1 Сокращение гибкости
      1. 7.1.1 Основные значения гибкости
   2. 7.2 Компоненты гибкости
      1. 7.2.1 Свойство flex-grow
      2. 7.2.2 Гибкость-усадка
      3. 7.2.3 Свойство гибкости
8. 8 Выравнивание
   1. 8.1 Выравнивание с автоматическими полями
   2. 8.2 Выравнивание оси: свойство justify-content
   3. 8.3 Cross-axis Alignment: свойства align-items и align-self
   4. 8.4 Packing Flex Lines: свойство align-content
   5. 8.5 Базовые линии гибких контейнеров
9. 9 Алгоритм размещения Flex
   1. 9.1 Начальная настройка
   2. 9.2 Определение длины линии
   3. 9.3 Определение основного размера
   4. 9.4 Определение поперечного размера
   5. 9.5 Выравнивание главной оси
   6. 9.6 Поперечное выравнивание
   7. 9.7 Разрешение гибких длин
   8. 9.8 Определенные и неопределенные размеры
   9. 9.9 Внутренние размеры
      1. 9.9.1 Внутренние основные размеры гибкого контейнера
      2. 9.9.2 Внутренние размеры гибкого контейнера
      3. 9.9.3 Вклады собственных размеров гибкого элемента
10. 10 Фрагментация макета Flex
    1. 10.1 Пример алгоритма фрагментации Flex
11. Приложение A: Сопоставление осей
12. Благодарности
13. Изменения
    1. Изменения по сравнению с CR от 16 октября 2017 г.
    2. Изменения по сравнению с CR от 26 мая 2016 г.
       1. Существенные изменения и исправления
       2. Разъяснения
    3. Изменения с 1 марта 2016 г.

       No related posts.