CSS 심화 공부(7) - flex item 속성(1) : flex item order

flex item order란 무엇인가?

flex item order는 CSS Flexbox 레이아웃 모델에서 플렉스 아이템의 순서를 변경하는 속성이다.

인테리어로 비유하자면 가구를 옮기고 배치하는 방법이라고 할까?

 

기본적으로 플렉스 아이템은 HTML 소스 코드에 나타나는 순서대로 배치되지만, order 속성을 사용하면 이러한 순서를 임의로 변경할 수 있다.

order

1. 순서

2. 명령하다

 

보다시피 영어단어 order는 순서를 나타낸다.

---

기본적으로 플렉스 아이템은 소스코드에 입력된 순서대로 나타난다.

          <div class="box1">A</div>
          <div class="box2">B</div>
          <div class="box3">C</div>

 

이런 코드가 있다면 입력된 순서대로 아이템이 배치되는 것이다. 때문에 이 순서를 바꾸고 싶다면 코드의 위치를 바꿔주거나 서로 내용을 바꿔줘야 한다.

하지만 order 속성을 사용하면 이런 순서를 코드의 순서를 바꾸지 않고도 이동이 가능하다.

기본적으로 요소가 가지는 order값은 0이다. 0은 플렉스 아이템이 가지고 있는 order 속성의 기본값으로써 각 요소는 모두  order 값이 0이기 때문에 코드의 순서대로 배치가 되는 것이다.

 

그렇다면 이런 order를 수정해서 하나의 order를 1로 만들어 주면 어떻게 될까?

.box2{order: 1;}

그러면 이렇게 순서가 바뀌게 된다. 2번째 위치해 있던 B 박스가 가장 마지막으로 이동했다. order의 값이 0보다 커져서 순서가 뒤로 밀렸기 때문이다.

.box2{order: -1;}

반대로 order를 -1로 수정해주면 0보다 낮은 수치여서 가장 앞쪽으로 순서가 바뀌게 된다.

 

그렇다면 동일한 코드를 2번 반복한 경우 어떻게 변할까?

<div class="box1">A</div>
<div class="box2">B</div>
<div class="box3">C</div>
<div class="box1">A</div>
<div class="box2">B</div>
<div class="box3">C</div>

order를 수정하지 않는다면 이렇게 코드의 순서대로 ABCABC가 반복되지만

.box3{order: -1;}

3번째 박스인 C의 order 값을 -1로 수정해주자 코드의 순서를 무시하고 2개의 개체 모두 맨 앞으로 이동하는 것을 볼 수 있다.

order의 장점

 

1. 유연한 레이아웃 구성

• HTML 소스 코드의 순서를 변경하지 않고도 시각적인 배치 순서를 자유롭게 조절할 수 있다.

2. 반응형 디자인 구현

• 미디어 쿼리와 함께 order 속성을 사용하면 화면 크기나 장치에 따라 아이템의 배치 순서를 동적으로 변경할 수 있다.

3. 접근성 향상

• 시각적인 순서와 소스 코드 순서를 분리하여 스크린 리더 사용자에게 더 나은 접근성을 제공할 수 있다.
• 예를 들어, 시각적으로는 중요한 콘텐츠를 먼저 보여주되, 소스 코드에서는 논리적인 순서를 유지할 수 있다.

4. 레이아웃 재정렬의 용이성

• 복잡한 레이아웃에서 아이템의 순서를 쉽게 재정렬할 수 있다.
• 이는 유지 보수성을 높이고, 레이아웃 변경 시 발생하는 번거로움을 줄여준다.

5. 시각적 중요도 강조

• 특정 아이템의 order 값을 높여 시각적으로 더 중요한 위치에 배치할 수 있다.
• 이를 통해 사용자의 시선을 유도하고, 중요한 정보를 강조할 수 있다.

실제 활용한다면?

order 개념은 특정 컨텐츠를 클릭했을 때 유용하다고 생각이 든다. 예를 들면 3개의 요금제가 있는 멤버십 가입 화면에서 특정 요금제를 클릭하면 해당 요금제의 플렉스 아이템이 중간 순서로 이동하는 식으로 반응하는 것이다.

CSS 코드만으로는 불가능한 것 같지만....