[CSS] 플렉스 박스 레이아웃


[CSS] 플렉스 박스 레이아웃

Flexbox (플렉스 박스) - 웹 페이지의 레이아웃을 조정/배치하는 데 사용되는 CSS 속성 - 요소를 수평/수직으로 정렬하고 공간을 분배함 # 자식 요소의 배치/정렬은 항상 부모 요소를 기준으로 생각해야 함 구성요소 1) 플렉스 컨테이너 (Flex container) - Flexbox를 사용하여 요소를 배치하는 부모 요소 - height를 지정해주지 않으면, 컨테이너 내 자식 요소의 높이만큼으로 자동 지정됨 - 플렉스 컨테이너는 바로 아래 자식 요소까지만 영향을 미침 2) 플렉스 아이템 (Flex items) - 플렉스 컨테이너 내에서 배치되는 자식 요소 3) 주축 (Main axis) & 교차축 (Cross axis) - 플렉스 컨테이너 내에서 요소가 배치되는 축 플렉스 항목 배치 부모요소 { d..


원문링크 : [CSS] 플렉스 박스 레이아웃