7.1.2 플렉스 박스 레이아웃의 기본 속성

플렉스 박스 레이아웃에 적용할 수 있는 기본 속성을 살펴보겠습니다.

● display 속성

모든 플렉스 박스 레이아웃은 display 속성값을 flex나 inline-flex로 지정하는 것에서 시작합니다.

display:flex; /* inline-flex */

flex는 적용된 요소의 다음 요소가 항상 줄 바꿈되고, inline-flex는 다음 요소가 주변에 배치되게 합니다. 그리고 display 속성이 지정된 요소는 플렉스 컨테이너가 되고, 자식 요소는 플렉스 아이템이 됩니다. 기본 예제 코드에 다음 코드를 추가하고 실행해 봅시다.

<style>
  .flex-container{
    display:flex;
  }
</style>

그림 7-4 실행결과

실행결과처럼 플렉스 박스 레이아웃의 기본 특징은 플렉스 아이템이 수직(세로)에서 수평(가로) 방향으로 배치된다는 것입니다. 이때, 플렉스 아이템이 원래 가지고 있던 박스 성격(인라인/인라인 블록/블록)은 무시됩니다.