Article
Flexible box layout의 정의
웹의 형태와 기기의 다양화에 따라 CSS3에 새롭게 추가된 속성으로, 기기 및 브라우저의 크기 변화에 따라서, 요소의 상대적 위치 및 크기도 유동적으로 일정하게 변화하는 레이아웃 모델입니다.
이 레이아웃 방법을 사용하면, 기존 방법과는 다르게 일정한 영역 내 요소들의
자유로운 정렬
크기, 공간의 적극적인 사용
요소 위치 변경
과 같은 이슈들을 조금 더 손쉽게 해결할 수 있습니다.
기존의 display:block, inline-block 등과는 다른 새로운 개념이라고 할 수 있죠.
flexbox 레이아웃을 사용하려면 첫번째로, 부모요소(flex-container), 자식요소(flex-items)가 우선 정의되어야 합니다.
실제 하나씩 사용해보면서 알아보도록 하겠습니다.
flex container
요소에 display:flex / display:inline-flex를 부여함에 따라 형성되는 박스 영역
결정된 flex container 자식요소들이 flex-items이 될 수 있습니다.
flex items
flex container의 자식 요소들.
실질적으로 flex layout 모델에 따라 배치됩니다.
main axis
flex item들이 정렬되는 기본방향을 의미합니다. 수평,수직 모두 새로 지정해줄 수 있습니다.
main start/ main end
flex item들이 시작/끝나는 지점을 의미합니다. main axis의 시작과 끝을 의미합니다.
cross axis
기본 방향(main axis)의 수직방향을 의미합니다. 기본 방향에 따라 정의됩니다.
cross start/cross end
cross axis의 시작과 끝을 의미합니다.
Flex container 속성 (부모에게 주는 속성)
단순히 하나의 요소가 있고, 그 요소에 display:flex 속성이 부여되면 해당 요소가 flex container가 됩니다.
flex container가 가지고 있는 자식요소들의 배열 방향을 지정해주고, 방향에 따라 정렬할 수도 있습니다.
※ 이하 예제는 최신 크롬브라우저에서 정확히 확인가능합니다.