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

Перечисление JustifyContent управляет свободным местом вдоль главной оси View. Значение пишут в ключе justifyContent объекта стиля. Главную ось задает FlexDirection.

Синтаксис

justifyContent: 'center'

Значения

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

Значение по умолчанию: 'flex-start'.

Пример

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

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',
		justifyContent: 'center',
	},
});

На экране оба текста сгруппируются по центру горизонтали.

Пример

Давайте разнесем элементы к краям через 'space-between':

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',
		justifyContent: 'space-between',
	},
});

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

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

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