display: flex

이 글에서는 display: flex로 설정된 요소가 화면에서 어떻게 디스플레이(표시)되는지 자세히 다룹니다.

display 속성이 flex 값으로 설정된 요소는
일반적인 문서 흐름에서 요소의 앞과 뒤를 줄바꿈 시키고, 컨테이너 영역을 정의할 수 있는
블록 레벨의 플렉스 컨테이너를 생성합니다.

display: flex로 설정된 요소의 외부 디스플레이는 display: block으로 동작하며, 내부 디스플레이는 플렉스 레이아웃 모델에 따라 콘텐츠를 배치합니다.

플렉스 컨테이너(Flex Container)

플렉스 컨테이너란 CSS에서 플렉스 레이아웃을 생성할 수 있는 컨테이너를 말합니다. 이 용어는 '플렉스 박스(Flexbox)'라는 이름으로도 불리며, 플렉스 레이아웃을 구현하는 모델을 나타냅니다. 플렉스 컨테이너를 생성하는 방법은 원하는 요소에 display: flex 또는 display: inline-flex를 설정하는 것입니다. 이 두 설정은 모두 플렉스 컨테이너를 생성하지만 다음과 같은 차이가 있습니다.

  • display: flex는 블록 레벨의 플렉스 컨테이너를 생성합니다.
  • display: inline-flex는 인라인 레벨의 플렉스 컨테이너를 생성합니다.

플렉스 컨테이너를 생성하는 요소는 플렉스 레이아웃에 대한 다음과 같은 속성을 적용할 수 있습니다. 이 속성들은 플렉스 아이템의 배치 및 정렬을 제어하는 데 유용합니다.

플렉스 컨테이너 전용 속성

display: flex 또는 display: inline-flex로 설정한 요소는 플렉스 컨테이너가 됩니다. 이때, 플렉스 컨테이너의 자식 요소들은 플렉스 아이템이라고 부르며, 이들을 어떻게 배치하고 정렬할지 제어할 수 있는 다양한 속성을 플렉스 컨테이너에 적용할 수 있습니다.

이 속성들은 플렉스 레이아웃을 위한 것이며, 대표적으로 다음과 같은 것들이 있습니다.

플렉스 컨테이너에 적용 가능한 레이아웃 전용 속성
flex-direction 주 축(main axis)의 방향을 설정합니다.
justify-content 주 축을 따라 플렉스 아이템의 정렬 방식을 설정합니다.
align-items 교차 축(cross axis)을 따라 아이템을 어떻게 정렬할지 결정합니다.
flex-wrap 아이템을 여러 줄로 나눌지 여부를 지정합니다.
align-content 여러 줄일 때 교차 축 정렬 방식을 설정합니다.
gap 플렉스 아이템 간격을 설정합니다.

이러한 속성들은 플렉스 아이템의 배치와 정렬을 설정하는 데 유용합니다.

예제

다음은 display: flex를 사용하여 플렉스 컨테이너를 구성한 간단한 예제입니다.

HTML 
<div class="flex-container">
    <div class="flex-item">child 1</div>
    <div class="flex-item">child 2</div>
    <div class="flex-item">child 3</div>
</div>
CSS 
.flex-container {
    display: flex; /* 플렉스 컨테이너 생성 */
    border: 2px solid #333;
    padding: 10px;
    gap: 10px; /* 플렉스 아이템 간격 설정 */
    justify-content: center; /* 플렉스 아이템들을 수평 중앙 정렬 */
}
.flex-item {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
}
실제 적용된 모습

브라우저 호환성

display 속성의 flex 값에 대한 브라우저 호환성
속성과 값
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
display: flex 29 12 20 9

명세서

display 속성의 flex 값에 대한 명세서 사양
명세서 사양
display: flex CSS Display Module Level 3
#valdef-display-flex

같이 보기