【CSS】Flex 컨테이너(Flex Container)안에서 Flex 아이템(Flex Item)의 순서를 지정하는 "order"속성

order 속성은 flex 컨테이너에서 flex 아이템을, 기재된 순서를 무시하고 레이아웃에 사용하는 순서를 지정합니다. 요소는 order 속성 값의 오름차순으로 정렬됩니다.

order 속성 값이 지정되어 있는 경우, 소스 코드의 순서대로 배치됩니다.

{order:순서 번호}

초기 값은 "0"이며, 속성의 초기 값보다 작은 음수 값 "-1"을 지정하면 가장 먼저 표시 할 수 있습니다.

반대로, 다른 "flex 아이템" 들이 초기값이고, 어떤 flex 아이템만을 "order"를 "1"로 지정하면 가장 마지막에 표시됩니다.

보통의 순서

[CSS]　order：number;

 #flex-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	border:1px dotted #FF00FF;
　　}
 .fnumber1,.fnumber2,.fnumber3,.fnumber4,.fnumber5
	{
	flex: auto;
	height: 50px;
	border-radius: 2px;
	margin:3px;
	text-align:center;
	color:#CCC;
	padding-top:25px;
　　}
 .fnumber1 {order:1;background-color:#960;}
 .fnumber2 {order:2;background-color:#666;}
 .fnumber3 {order:3;background-color:#090;}
 .fnumber4 {order:4;background-color:#FF0;}
 .fnumber5 {order:5;background-color:#F0F;}

[HTML]

 <div ="flex-container">
  <div class="fnumber1">1</div>
  <div class="fnumber2">2</div>
  <div class="fnumber3">3</div>
  <div class="fnumber4">4</div>
  <div class="fnumber5">5</div>
 </div>

표시 순서 변경하기

[HTML]

 <div ="flex-container">
  <div class="fnumber5">1</div>
  <div class="fnumber4">2</div>
  <div class="fnumber1">3</div>
  <div class="fnumber2">4</div>
  <div class="fnumber3">5</div>
 </div>

【CSS】"display : flex;"를 사용한 레스 폰 시브 디자인에 편리한 플렉시블 박스 (flexible box, flexbox)의 개념 【CSS】Flex 아이템이 여백을 채우거나 또는 크기를 축소하는 등의 신축 비율을 지정하는 Flex 속성 【CSS】Flexible Box(플렉시블 박스)의 Flex 아이템의 행(行)의 수직 방향(cross-axis)의 배치 방법(align-content) 【CSS】Flexible Box(플렉시블 박스)의 Flex 아이템 배치 속성 〜 flex 아이템의 배치 방법(flex-direction), flex 아이템의 수평 정렬(justify-content), flex 아이템의 수직 정렬(align-items) 【CSS】Flex 컨테이너에서 Flex 아이템의 줄 바꿈 설정～ flex-wrap 속성

스폰서 링크