플렉스박스 레이아웃은 부모 요소의display 속성에flex 또는inline-flex 값을 지정해 정의합니다. 이 때, 부모 요소는플렉스 컨테이너, 각각의 자식 요소를플렉스 항목이 됩니다.

flex 값은 요소를 블록 레벨 플렉스 컨테이너로 지정하고,inline-flex는 인라인 레벨 플렉스 컨테이너로 지정합니다. 두 값은 요소에 새로운플렉스 서식 맥락을 생성합니다. 플렉스 서식 맥락은 블록 서식 맥락과 유사하여 플로팅 요소가 컨테이너를 침범하지 않으며, 컨테이너의 바깥 여백이 자기 아래 플렉스 항목의 바깥 여백과 상쇄되지 않습니다.

같이 보기

속성 참고서

• align-content
• align-items
• flex
• flex-direction
• flex-flow
• flex-wrap
• justify-content

더 읽어보기

• CSS Flexbox Guide:Flexbox의 기본 개념
• CSS Flexbox Guide:flex container 항목 나열
• CSS Flexbox Guide:flex items 래핑 마스터하기
• Firefox Developer Tools > How to:CSS Flexbox 검사기: Flexbox 레이아웃 검사