flex로 요소를 정렬할때 main axis 축을 따라 정렬을 해주기 위해선 justify-content를 사용합니다.
justify-content:center; 는 가운데 정렬
justify-content:flex-start;는 flex-direction이 시작되는 지점부터 정렬
flex-direction:row-reverse;의 경우 오른쪽에서 왼쪽으로 정렬되기때문에
이때 justify-content:flex-start;로 한다면 시작점인 오른쪽부터 정렬됩니다.
cross axis 축을 따라 정렬을 해주기 위해선
align-items, align-content를 사용합니다
align-items 속성을 적용하자 flex-direction:row의 cross axis 축인 위에서 아래를 따라 요소의 위치가 바뀝니다.
align-items 속성과 justify-content 속성을 모두 사용하여 X, Y축 중앙에 위치시킨것을 확인할 수 있습니다.
align-items, align-content의 차이점
align-items
align-items는 각각의 flex-line에 따라 생긴 cross axis 축을 따라 움직이기 때문에
flex-wrap:wrap이 적용된 요소들을 align-items를 이용하여 움직이면 wrap을 따라 층이 나뉘어진 틀을 따라서 움직입니다.(두 줄이상)
align-content
하나의 거대한 틀을 따라 형성된 cross axis축을 기준으로 움직이기 위해서는
align-content를 사용합니다.
우선적으로 align-items를 사용하고 생각대로 되지 않으면 align-content를 사용 합니다.
???