Flexbox는 절대 위치로 배치된 하위 요소의 새로운 동작을 가져옵니다.

조 메들리
조 메들리

이전 버전의 CSS 유연한 상자 레이아웃 사양에서는 절대 위치로 배치된 하위 요소가 크기가 0x0픽셀인 가변 항목인 것처럼 정적 위치를 설정했습니다. 최신 버전의 사양에서는 이러한 요소가 흐름에서 완전히 벗어나고 정렬 및 양쪽 맞춤 속성을 기반으로 정적 위치를 설정합니다. 이 문서 작성 시점을 기준으로 데스크톱용 Edge와 Opera 39에서는 이미 이 기능을 지원하고 있습니다.

예를 들어 다음 HTML에 위치 지정 동작을 적용해 보겠습니다.

<div class="container">
    <div>
    <p>In Chrome 52 and later, the green box should be centered vertically and horizontally in the red box.</p>
    </div>
</div>

다음과 같은 항목을 추가합니다.

.container {  
    display: flex;  
    align-items: center;  
    justify-content: center;   
}  
.container > * {  
    position: absolute;  
}

Chrome 52 이상에서 중첩된 <div>는 컨테이너 <div>에서 완벽하게 중앙에 배치됩니다.

Chrome52 동작

정책을 준수하지 않는 브라우저에서는 녹색 상자의 왼쪽 상단이 빨간색 상자의 상단 중앙에 있습니다.

Legaci 동작

Chrome 또는 다른 브라우저에서 직접 사용해 보려면 샘플을 다운로드하거나 라이브 데모를 방문하세요.