Перечисление AlignSelf

Перечисление AlignSelf задает выравнивание одного элемента внутри View поперёк главной оси. Значение пишут в ключе alignSelf стиля элемента. Общее выравнивание контейнера задает AlignItems.

Синтаксис

alignSelf: 'flex-end'

Значения

Значение	Описание
`'auto'`	Берется выравнивание родителя из `alignItems`.
`'flex-start'`	Элемент прижат к началу поперечной оси.
`'flex-end'`	Элемент прижат к концу поперечной оси.
`'center'`	Элемент по центру поперечной оси.
`'stretch'`	Элемент растягивается на всю поперечную ось.
`'baseline'`	Элемент выровнен по базовой линии текста.

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

Пример

Давайте прижмем один текст к концу поперечной оси:

import { View, Text, StyleSheet } from 'react-native';

export default function App() {
	return (
		<View style={styles.row}>
			<Text style={styles.end}>abcde</Text>
			<Text>12345</Text>
		</View>
	);
}

const styles = StyleSheet.create({
	row: {
		flexDirection: 'row',
		height: 80,
		alignItems: 'flex-start',
	},
	end: {
		alignSelf: 'flex-end',
	},
});

На экране первый текст окажется у нижнего края контейнера, второй у верхнего.

Пример

Давайте поставим один блок по центру поперечной оси:

import { View, Text, StyleSheet } from 'react-native';

export default function App() {
	return (
		<View style={styles.col}>
			<Text style={styles.mid}>abcde</Text>
			<Text>12345</Text>
		</View>
	);
}

const styles = StyleSheet.create({
	col: {
		height: 120,
		alignItems: 'flex-start',
	},
	mid: {
		alignSelf: 'center',
	},
});

На экране первый текст сместится к центру по горизонтали, второй останется у левого края.

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

перечисление AlignItems,
которое выравнивает все элементы поперёк оси
перечисление JustifyContent,
которое распределяет элементы вдоль главной оси
перечисление FlexDirection,
которое задает направление главной оси
компонент View,
который держит дочерние элементы