수평정렬 방법과 flexbox

• viewport나 요소 사이즈가 불명명확하거나, 동적으로 변할 때에도 요소를 적절히 배치할 수 있는 기능을 제공한다.
• 부모 tag(flex container)에 display : flex를 주면 된다.

flex container에 설정 가능한 property

property	설명
display	flex container 정의
flex-derection	flex item들의 주 축(main-axis) 방향 설정
flex-wrap	flex item들을 1행 또는 복수의 행으로 배치
flex-flow	flex-direction과 flex-wrap을 한번에 설정(단축 property)
justify-content	주 축(main-axis) 기반 정렬 방법 설정
align-content	교차 축(cross-axis) 기반 정렬 방법 설정(2행 이상)
align-items	교차 축(cross-axis) 기반 정렬 방법 설정(각 행마다 적용)

display

• flex : block 특성의 flex container 정의 (flex container간에 수직 정렬)
• inline-flex : inline 특성의 flex container 정의 (flex container간에 수평 정렬)

flex-direction

• row : 좌에서 우로 수평 정렬 (왼쪽 수평 정렬)
• row-universe : 우에서 좌로 수평 정렬 (오른쪽 수평 정렬)
• column : 위에서 아래로 수직 정렬
• column-reverse : 아래에서 위로 수직 정렬

div 박스내의 텍스트의 가운데 정렬

• 수평 가운데 정렬 : text-align : center;
• 수직 가운데 정렬 : line-height : height에서 설정한 높이값을 동일하게 줌

flex-wrap

• nowrap : flex item들을 개행하지 않고, 한 행에 배치
  • flex item들의 너비 합이 flex container 너비보다 큰 경우 flex item들이 넘쳐서, flex container밖에 표시될 수 있다. 이때 flex container에 overflow : auto; 설정을 넣어주면 넘치지 않고, flex container안에 스크롤이 생긴다.
• wrap : flex item들 너비 합에 flex container 너비 보다 큰 경우, 복수의 행에 표시
• wrap-reverse : flex item들이 너비 합이 flex container 너비보다 큰 경우, warp과 동일하게 복수의 행에 표시되지만 순서가 연방향이다.

flex-flow (단축 property)

• flex-direction과 flex-wrap을 한번에 쓸수 있는 단축 property

flex-flow : flex-direction flex-wrap;

justify-content

• main-axis 기반 수평 정렬 방법 설정
• flex-start(default), flex-end
  center, space-between, space-around

align-items, align-content

• align-items
  strech (default) : 교차축을 기반으로 아이템들을 늘려서 배치
  flex-start : 교차축을 시작점을 기반으로 아이템들의 원래 형태로 배치
  flex-end : 교차축을 끝점을 기반으로 아이템들의 원래 형태로 배치
  baseline : 문자를 기준으로 배치
  center
• align-content :
  strech (default) : 교차축을 기반으로 아이템들을 늘려서 배치
  flex-start : 교차축을 시작점을 기반으로 아이템들의 원래 형태로 배치
  flex-end : 교차축을 끝점을 기반으로 아이템들의 원래 형태로 배치
  center : 교차축의 중심을 기반으로 아이템들을 배치
  space-between, space-around
• flexbox 중앙정렬

justify-content : center;
align-content : center;

flex item에 설정 가능한 property

property	설명
order	flex item 배치 순서 설정
flex-grow	flex item 너비 증가 비율 설정
flex-shrink	flex item 너비 축소 비율 설정
flex-basis	flex item 기본 너비 설정(공간 분배 전)
flex (단축 property)	flex-grow, flex-shrink, flex-basis를 한큐에 설정
align-self	flex container의 align-self/align-content보다 우선하여, 개별 flex item 수직 정렬방법 설정

### order * default 값은 0, 임의로 숫자를 정할 수 있음(음수 가능) * order 값이 앚은 순서대로 배치됨

flex-grow

• 해당 flex-item의 flex-grow값 / 전체 flex item의 flex-grow 총 합
• 즉, 옆에있는 flex-item들의 비율에 맞춰 설정한다.

flex-shrink

• grow와 반대 개념, 숫자가 클수록 작아진다.

flex-basis

• 기본값은 auto이며, 강제로 지정할 수 있다.

flex (단축 property)

flex : flex-grow flex-shrink flex-basis;

align-self

• align-content / align-items와 동일한 property값으로 수직 정렬 설정 가능

align-self : flex-start | flex-end | center | baseline | stretch

flex-box관련 알면 도움되는 사이트

• flex-box playground