[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 : 위에서 아래 수직 정렬

flex-wrap : 플렉스 항목을 한 줄 또는 여러 줄로 배치하기

wrap : flex item의 전체 크기가 컨테이너보다 크면 줄을 바꿔서 배치

nowrap : flex item의 전체 크기가 컨테이너보다 크면 컨테이너 넘어감

justify-content : 주축을 기준으로 배치 (flex-direction이 row이냐 column 이냐에 따라 주축이 변경된다.)

space-between: flex item을 일정한 간격으로 정렬 (ㅁ  ㅁ  ㅁ)

flex-start: 주축의 시작부분 기준으로 정렬 (ㅁㅁㅁ    )

flex-end: 주축 끝부분 기준으로 정렬 (    ㅁㅁㅁ)

space-around : 중앙 기준으로 간격 정렬 ( ㅁ   ㅁ   ㅁ )

center: 중앙 기준으로 모아서 정렬 (    ㅁㅁㅁ    )

align-items : 교차축을 기준으로 배치 (flex-direction이 row이냐 column 이냐에 따라 교차축이 변경된다.)

stretch : flex item 높이를 늘려서 전체 높이 채운다

flex-start: 시작 부분을 기준으로 정렬 (위에다붙임)

center: 요소의 중앙을 기준으로 맞춰서 정렬 (align-items: center, justify-content: center, 

margin: auto → 정중앙에 정렬)

flex-end: 끝부분 기준으로 정렬 (밑에다붙임)

align-self : 플렉스 항목을 개별적으로 배치할 수 있다.

align-content : 플렉스 항목이 여러줄 일 때 교차축 방향으로 배치 방법을 지정할 수 있다.

flex item

flex (flex-grow, flex-shrink, flex-basis 합친것)

flex: 1 이면 flex-grow 1, flex-shrink 1, flex-basis 0과 같음 (기본)

flex: none 이면 flex: 0 0 auto 와 같음 (크기 고정하려면 flex: none 속성 적용해야한다)

flex-grow

0 : 컨테이너의 크기가 커져도 원래 크기로 유지

1 : 원래 크기에 상관없이 컨테이너를 채우도록 커짐

flex-shrink

0 : 컨테이너의 크기가 자식 크기보다 작아져도 크기 줄어들지 않고 원래 크기로 유지

1 : 컨테이너의 크기가 자식 크기보다 작아지면 컨테이너 크기에 맞춰서 줄어든다

flex-basis (기본 설정 auto)

px, %, em, rem 사용 가능, 사용 시 item 크기 고정

0 : 절대적 flex item이 되어서 container 기준으로 크기가 고정되어서 flex (1:1:1), 0px 처럼 단위도 함께 설정해야한다.

auto : 콘텐츠 크기 기준으로 크기 결정 (안의 콘텐츠가 커지면 다른 박스를 밀어냄)

order

flex-flow : 플렉스 방향과 여러 줄의 배치를 한꺼번에 지정하기

order : 플렉스 항목의 배치 순서 변경

flex : 플렉스 항목의 크기 조절

margin : auto 0 : 수직 중앙에 위치

margin-right : auto → 왼쪽 고정 (margin이 오른쪽으로 밀어낸다, 로고같은것)

margin-left : auto → 오른쪽 고정

margin : 0 auto → 수평 중앙에 위치

margin-bottom : auto → 위쪽 고정

margin-top: auto → 아래쪽 고정 (ex) Footer )