수평정렬 방법과 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관련 알면 도움되는 사이트