[반응형 웹 디자인]플렉서블 박스 기술 익히기-3

교차축 방향으로 다양하게 플렉스 아이템 배치하기

속성명	속성값	적용 요소
align-items	stretch(기본값), flex-start, flex-end, center, baseline	플렉서블 박스

속성값명	속성값 설명
stretch	박스를 확장해서 배치하며,기본값
flex-start	박스를 교차축의 시작점에 배치
flex-end	박스를 교차축의 끝점에 배치
center	박스를 중앙으로 배치
baseline	박스를 시작점에 배치되는 박스의 글자 베이스라인에 맞춰 배치합니다. 시작점에 배치되는 박스는 교차축의 시작점과 글자 베이스라인의 거리가 가장 먼 박스가 교차축의 시작점에 배치됩니다.

교차축 방향으로 플렉스 아이템을 개별적으로 배치하기

속성명	속성값	적용 요소
align-self	auto, stretch, flex-start, flex-end, center, baseline	플렉스아이템

속성값명	속성값 설명
auto	플렉서블 박스(플렉스 아이템의 부모 박스)의 align-items 속성값을 상속 받습니다. 부모 박스에 적용된 속성값이 없는 경우에는 stretch 속성값이 적용됩니다.

여러 줄인 플렉스 아이템을 교차축 방향으로 다양하게 배치하기

속성명	속성값	적용 요소
align-content	stretch(기본값), flex-start, flex-end, center, space-between, space-around	모든 요소

align-content 속성값 설명은 justify-content 속성값과 같으므로 생략함

플렉스 아이템의 배치 순서 바꾸기

속성명	속성값	적용 요소
order	0(기본값), 정숫값	플렉스 아이템

속성값명	속성값 설명
정숫값	입력된 정숫값에 따라 박스가 배치됩니다. 정숫값으로는 양숫값과 음숫값을 사용 할 수 있습니다. 양숫값을 입력하면 입력된 양숫값에 따라 배치됩니다. 만약 동일 한 양숫값을 입력하면 HTML 태그 순서상 뒤에 작성된 태그가 적용됩니다. 음숫 값을 입력하면 기본값인 0이 됩니다.