Flex Containers 속성 - order

Flex Items

Flex Items를 위한 속성들은 다음과 같다.

속성	의미
order	Flex Item의 순서를 설정
flex	flex-grow, flex-shrink, flex-basis의 단축 속성
flex-grow	Flex Item의 증가 너비 비율을 설정
flex-shrink	Flex Item의 감소 너비 비율을 설정
flex-basis	Flex Item의 (공간 배분 전)기본 너비 설정
align-self	교차 축(cross-axis)에서 Item의 정렬 방법을 설정

 

order

Item의 순서를 설정한다.
Item에 숫자를 지정하고 숫자가 클수록 순서가 밀린다. 음수가 허용된다.

HTML 구조와 상관없이 순서를 변경할 수 있기 때문에 유용하다.

값	의미	기본값
숫자	Item의 순서를 결정	0

order: 순서;

 

.container {
  border: 4px solid;
  display: flex;
}

.container .item {
  width: 100px;
  height: 100px;
  background: tomato;
  border: 4px dashed red;
  border-radius: 10px;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item1{
  order: 1;
}

.item4{
  order: 1;
}

.item6{
  order: -1;
}

order는 숫자가 클수록 마지막에 배치가 되고, 숫자가 작을 수록 앞에 배치가 된다. (0은 기본값이기 때문에 선언해도 원래자리 그대로 있다.)

그리고 order의 숫자가 같을때 배치되는 방식은, html에 작성된순서대로 늦게 작성된 html가 뒤에 배치된다.