FlexBox

• 요소의 정렬되는 방향, 순서, 요소 간의 간격을 하나하나 수치적으로 처리하지 않아도 알아서 유연하게 처리해주는 형식(방식)

flex의 구성

• flex container
  정렬이 필요한 요소(item)를 감싸는 요소
• item
  정렬이 적용될 요소

flex의 축

• 중심축 (main axis)
• 교차축, 반대축 (cross axis)

flex container 전용 속성

display : flex

• 감싸는 요소를 flex 형식으로 변경 -> 내부에 작성되는 item을 유연하게 배치하겠다는 의미
• 해당 속성이 적용되면 유연하게 배치할 수 있도록 내부 item의 자동으로 지정된 margin 속성이 사라진다

flex-direction

• 중심축의 방향, 시작/끝 지정

row

• 기본값
• x축, 왼쪽 -> 오른쪽

row-reverse

• x축, 오른쪽 -> 왼쪽

column

• y축, 위 -> 아래

column-reverse

• y축, 아래 -> 위

justify-content

• 중심축 방향을 기준으로 item 정렬

flex-start

• 중심축 시작 지점을 기준으로 정렬

flex-end

• 중심축 끝 지점을 기준으로 정렬(순서가 뒤집히진 않음)

center

• 중심축 가운데 정렬

space-around

• item에 중심축 방향으로 일정한 간격을 부여

space-evenly

• item에 중심축 방향으로 동일한 간격을 부여

space-between

• item에 중심축 방향으로 동일한 간격을 부여
• 단, 양 끝은 flex-container에 붙게 한다

align-items

• 교차축을 기준으로 item 정렬

stretch

• 기본값
• item을 교차축 방향으로 꽉 찰만큼 늘림
• 단, item에 교차축 방향 크기가 지정되어 있다면 적용 X

flex-start

• 교차축 시작 지점에 배치

flex-end

• 교차축 끝 지점에 배치

center

• 교차축 가운데 지점에 배치

baseline

• item에 작성된 내용(content)이 한 직선에 배치될 수 있도록 item을 교차축 방향을 알맞게 움직여 배치

flex-wrap

• item이 한 줄/여러 줄로 배치 되게 지정

nowrap

• 기본값
• 한 줄로 배치, item의 크기가 변경(훼손)될 수 있음

wrap

• 여러 줄로 배치

wrap-reverse

• 여러 줄로 배치(cross axis 방향 반대)

flex-flow

• flex-direction과 flex-wrap을 한 번에 지정하는 속성

.flex-container{
	flex-flow: row-reverse wrap;
}

align-content

• cross axis(교차축)을 기준으로 포장된(wrap) item들을 정렬
• 조건 : flex-wrap이 wrap 또는 wrap-reverse 이여야 함

flex-start

• 축 시작 지점 기준으로 정렬

flex-end

• 축 끝 지점 기준으로 정렬

center

• 축 가운데 정렬

space-around

• item에 축 방향 양쪽으로 일정 크기 공간을 배치

space-evenly

• item에 축 방향 양쪽으로 모두 동일한 크기의 공간을 배치

space-between

• space-evenly에서 시작, 끝 item은 flex-container 붙게 배치

item 전용 속성

order

• item이 중심축이 배치되는 순서를 지정 기본값 0, 정수(음수, 양수, 0) 작성 가능
• 값이 작을수록 중심축의 시작 부분에 배치됨

.order1{order:1;}
.order2{order:2;}
.order3{order:3;}
.order4{order:4;}
.order5{order:5;}

flex-grow

• item이 flex container 내부에서 비어있는 공간을 매꿀 수 있도록 팽창하는 정도를 지정하는 속성
• 기본값 0 -> 팽창하지 않음
• 팽창할 비율 작성

.grow1{flex-grow: 1;}
.grow2{flex-grow: 2;}
.grow3{flex-grow: 3;}
.grow4{flex-grow: 4;}

flex-shrink

• item이 수축하는 정도를 지정하는 속성
• 기본값 1

.shrink0{flex-shrink: 0;}
.shrink1{flex-shrink: 1;}
.shrink2{flex-shrink: 2;}
.shrink3{flex-shrink: 3;}

flex-basis

• item의 중심축 방향의 기본 점유율(크기)을 지정하는 속성
  (각종 크기 단위 px, %, vh, em, rem 등 사용 가능)

.basis-150px{flex-basis: 150px;}
.basis-10{flex-basis: 10%;}
.basis-25{flex-basis: 25%;}

flex

• flex-grow, flex-shrink, flex-basis를 한 번에 작성하는 속성

.flex1{flex: 0 0 200px;}

align-self

• 각각의 item별로 교차축 방향으로 정렬을 지정하는 속성

.self-start{align-self: flex-start;}
.self-end{align-self: flex-end;}
.self-center{align-self: center;}