Flexbox -> justify-content, align-items, order

🍰 주 축 기준 배치 방법 지정

justify-content

• flex-start : 주축의 시작점 기준 배치
• flex-end : 주축의 끝점 기준 배치
• center : 주축의 중앙 기준 배치
• space-between : 첫 항목은 시작점, 끝 항목은 끝점, 중앙 항목은 같은 간격으로 배치
• space-evenly : 모든 항목을 같은 간격으로 배치
• space-around : 각 항목은 양쪽 여백의 절반만큼 나누어 가짐

🍰 교차 축 기준 배치 방법 지정

align-items

• stretch : flex item을 확장해 교차축을 꽉 채움. 기본값
• flex-start: 교차축의 시작점 기준 배치
• flex-end : 교차축의 끝점 기준 배치
• center : 교차축의 중앙 기준 배치
• baseline : 시작점과 글자 기준선이 가장 먼 플렉스 항목을 시작점에 배치

🍰 항목의 배치 순서 바꾸는 order 속성

• 0 - 입력한 순서대로 배치
• 숫자 - 그 순서에 따라 배치
• 음수도 가능

참고: 

https://developer.mozilla.org/en-US/docs/Web/CSS/align-items,

https://www.aladin.co.kr/m/mproduct.aspx?ItemId=227200213(책)