Flex 사용 줄이기

UI 구현 실무를 하면서 온갖 곳에 Flex를 사용하는 나를 발견했다. 한 컴포넌트에 60개도 넘게 사용하고 있는 것을 보니 현타가 와서 이를 최대한 줄여보려고 한다.

TailwindCSS로 사용하는 Display Flex

---

수직 정렬 하기 위한 flex의 사용

align-items: center 속성을 통해 엘리멘트를 수직정렬 하기 위해 flex를 사용하는 것은 display: block 을 적용하고, line-height 값을 height 값 만큼 주어 수직 정렬할 수 있다.

엘리멘트를 수직으로 쌓기 위한 flex의 사용

display: flex; flex-direction: column; align-items: center;을사용하여 엘리멘트들을 수직으로 쌓으면서 중앙으로 정렬하였는데 이때는 display:block; text-align: center;를 사용하여 엘리멘트를 쌓는 것이 덜 복잡한 UI 구현을 할 수 있다.

---

모두 알고있는 내용이지만 flex가 제공하는 기능이 많아 너무 남용하는 것 같아 새삼스럽게 정리해보았다. 같은 UI더라도 다른 방법으로 구현할 줄 알아야 하고, 많은 속성들을 나열하는 것 보다 최소한의 속성들을 이용하는 것이 수정 및 개선시에도 효율적일 것이라고 생각한다.