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

Перечисление AlignContent управляет свободным местом между линиями flex в View. Значение пишут в ключе alignContent объекта стиля. Имеет смысл, когда включен перенос через FlexWrap со значением 'wrap'.

Синтаксис

alignContent: 'space-between'

Значения

Значение	Описание
`'flex-start'`	Линии прижаты к началу поперечной оси.
`'flex-end'`	Линии прижаты к концу поперечной оси.
`'center'`	Линии сгруппированы по центру поперечной оси.
`'stretch'`	Линии растягиваются, заполняя поперечную ось.
`'space-between'`	Равный зазор между линиями; края без отступа.
`'space-around'`	Равный зазор вокруг каждой линии.

Пример

Давайте перенесем элементы и разнесем линии по высоте:

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

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

const styles = StyleSheet.create({
	wrap: {
		flexDirection: 'row',
		flexWrap: 'wrap',
		height: 120,
		alignContent: 'space-between',
	},
	item: {
		width: '40%',
	},
});

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

Пример

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

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

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

const styles = StyleSheet.create({
	wrap: {
		flexDirection: 'row',
		flexWrap: 'wrap',
		height: 120,
		alignContent: 'center',
	},
	item: {
		width: '45%',
	},
});

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

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

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