CSS FLEX 정리

오늘은 CSS 레이아웃의 FLEX에 대해서 알아보겠습니다. (기초적인 FLEX에 대한 이해를 목적으로 하고, 자세한 활용은 CodePen 어플리케이션을 첨부하니 참고해 주시길 바랍니다.)

flex는 CSS 레이아웃의 역사에서 비교적 최근 등장한 기능입니다. 그 전까지는 table, position, float 등을 이용해서 페이지 레이아웃을 구현했습니다. 그러나 table의 경우 코드가 표의 정보까지 함께 나타내서 순수하게 레이아웃만을 위한 기능을 하지 못했고, position이나 float 역시 다양한 화면 구성에는 한계가 있었습니다.

그 뒤에 등장한 flex는 이전 기능들보다 훨씬 뛰어났습니다. 보다 간결하고 직관적인 코드로 화면 구성을 가능하게 했습니다. 더 최근에 grid라는 최신 기술이 등장했지만 아직까지 flex는 레이아웃을 위하 가장 많이 쓰이고 있습니다. 그럼 flex의 기본 구성과 활용을 알아보겠습니다.

FLEX를 위한 기본 조건

먼저 HTML입니다. flex는 부모인 container와 자식인 item이 있어야만 합니다. 이 조건이 먼저 만족되고 부모인 container에 display flex를 할당한 경우에만 활용 할 수 있죠.

그럼 이 조건에 맞춰서 먼저 HTML을 작성하겠습니다.

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
</div>

container값을 선택자로 가지는 div에 7개의 item 요소를 추가했습니다.

FLEX 실행

상단의 CodePen 어플을 통해서 구성된 Flex를 직접 보실 수 있습니다. 여기에 container값에 display: flex를 할당하겠습니다.

차이가 바로 눈에 들어오실 겁니다.

display의 기본값(default)은 block level element입니다. 즉 아이템 하나, 하나가 화면 전체를 사용하는 것이죠. 이를 flex 값으로 변경시켜주면 block level 설정이 무너져서 작게 모인 것처럼 보이는 겁니다.

이렇게 flex로 설정만 해주면 다양한 flex의 용법을 통해 이들 item의 배열을 바꿔 놓을 수 있습니다. 이 부분은 너무 방대한 내용이기 때문에 글로써 설명하기 보다는 하단에 어플을 삽입해 놓겠으니 이를 활용해 체크해 주시기 바랍니다.

주의

‘div’ 값은 그 자체로 block level element입니다. 때문에 엄밀히 말하자면, 위의 예시는 display의 기본값이 아니더라도 화면 전체를 사용했을 것입니다. 만약 div 대신 span을 사용했다면, inline element인 span의 배열은 div 과 달랐을 것입니다.

FLEX의 다양한 활용