[CSS] Flexbox (플렉스 박스) 레이아웃
플렉스 박스 레이아웃이란 그리드 레이아웃을 기본으로 하여 박스들을 원하는 위치에 위치하도록 하는 것이다. 1. 플렉스 컨테이너(flex container) - 웹 문서에 텍스트, 이미지, 표 등 요소들을 플렉스하게 사용하려면 플렉스 하고자하는 요소들을 먼저 플렉스 컨테이너(최상위 태그)로 전부 묶어줘야 한다. 2. 플렉스 항목(flex item) - 플렉스 컨테이너에 담기는 요소들이다. 3. 주축(main axis) - 플렉스 컨테이너 안에서 플렉스 항목을 배치하는 기본 방향이다. 주축은 기본적으로 왼쪽에서 오른쪽 방향(row)으로 배치한다. 4. 교차축(cross axis) - 교차축은 주축과 교차되는 방향이다. flex-direction이 row이면 위에서 아래 방향으로 교차축이 배치되고 flex-direction이 column이면 좌에서 우로 교차축이 배치된다. 플렉스 사용법 및 속성 display : 플렉스 박스 레이아웃을 지정하려면 콘텐츠들을 하나의 부모요소로 묶고 display 속성을 이용해 플렉스 박스 형태를 지정해야 한다. (ex. display : flex;) display 속성과 브라우저 접두사 : 대부분의 최신 모던 브라우저에서는 모두 지원되지만 플렉스 박스를 지원하는 방법이 다르므로 브라우저 접두사를 붙여야 한다. ex) .container { display : -webkit-box; /* ios 6이하, 사파리 3.1 */ display : -moz-box; /* 파이어폭스 19 이하 */ display : -ms-flexbox; /* IE 10 */ display : -webkit-flex; /* 웹킷 구 버전*/ display : flex ; /* 표준 스펙*/ } flex-direction : 자식 요소 정렬 방향 row : 왼쪽에서 오른쪽 수평방향 정렬 column : 위에서 아래 수직 정렬 f...