Joe Medley
이전 버전의 CSS Flexible Box 레이아웃 사양은 절대 위치가 지정된 하위 요소의 정적 위치를 크기가 0px x 0px인 flex 항목인 것처럼 설정했습니다. 최신 버전의 사양은 이러한 요소를 흐름에서 완전히 제외하고 align 및 justify 속성을 기반으로 정적 위치를 설정합니다. 이 문서의 작성 시점을 기준으로 데스크톱 및 Android용 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>의 중앙에 정확하게 배치됩니다.
정책을 준수하지 않는 브라우저에서는 녹색 상자의 왼쪽 상단이 빨간색 상자의 상단 중앙에 표시됩니다.
