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

Перечисление AlignItems выравнивает дочерние элементы поперёк главной оси View. Значение пишут в ключе alignItems объекта стиля. Направление оси задает FlexDirection.

Синтаксис

alignItems: 'center'

Значения

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

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

Пример

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

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

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

const styles = StyleSheet.create({
	row: {
		flexDirection: 'row',
		height: 80,
		alignItems: 'center',
	},
});

На экране оба текста окажутся по вертикали по центру контейнера.

Пример

Давайте прижмем элементы к началу поперечной оси:

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

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

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

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

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

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