flex-end를 이용해 왼쪽과 오른쪽에 각각 컴포넌트 위치시키기

보통 리스트를 쓰면 justify-content: space-between를 통해 동일한 여백으로 차례차례 정렬한다.

그러나 예를 들어 네비바에서는 왼쪽에 로고를, 오른쪽에 다른 메뉴를 넣고 가운데에는 메뉴를 두지 않기 때문에 justify-content: flex-end를 통해 오른쪽으로 치우치게 둔다. 오른쪽으로 치우치게 두는 이유는 왼쪽부터 차곡차곡 쌓이는 구조이기 때문에 오른쪽에 정렬하는 것이 쉽지 않다. 따라서 오른쪽으로 먼저 정렬하게 한 후에 왼쪽에 정렬하는 것이 낫다.

그리고 왼쪽에 두고 싶은 곳에 스타일을 margin-right: auto로 하면 오른쪽 마진을 지정한 것이 왼쪽으로 치우친다.

<TableInfo style={{ justifyContent: 'flex-end' }}>
	<div style={{ marginRight: 'auto' }}>이미지 정보</div>
	<Button>↑ 위로 이동</Button>
	<Button>↓ 아래로 이동</Button>
	<ThemeButton>이미지 추가</ThemeButton>
</TableInfo>