Flex는 Flexible Box또는 FlexBox라고 부르기도 한다. Flex는 레이아웃 배치 전용 기능으로 고안되었다. inline-block, float보다 편리하고 강력한 레이아웃을 디자인 할 수 있게 도와준다.
반드시 알아야하는 기본용어
주축(Main-axis): 컨테이너 안에 배치된 items의 수평방향의 축을 말한다. 이런 축의 시작과 끝을 main start와 main end라고 부른다.
교차축(cross-axis): Item이 내부에 배치되는 방향에 수직으로 이루는 축을 말한다. 축의 시작과 끝을 cross start와 cross end라고한다.
컨테이너: display: flex
로 설정된 부모 요소를 flex container라고 한다.
아이템: 부모 요소가 flex container로 지정되어있으면 그안의 자식 요소들은 Flex item으로 불린다.
Flex-container(부모 요소)
.container {
display: flex
}
flex-dircection
flex-wrap
justify-content
align-items
align-content
배치 방향 설정
flex-direction: row(기본값) | row-reverse | column | column-reverse
줄넘김 처리(flex-wrap)
flex-wrap: nowrap(기본값) | wrap | wrap-reverse
기본적으로 display: flex
같은 속성을 주게되면 모든 아이템들이 한줄로만 맞추려고 한다. 웹페이지의 구역이 줄어들게되면 아이템들이 넘쳐흘러 밖으로 나오게된다. 그래서 flex-wrap를 사용해 줄바꿈을 지정해 줄 수 있다.
nowrap(기본값): 줄바꿈을 하지 않지만 공간이 부족하면 넘쳐흐른다.
wrap: 줄바꿈 한다.
wrap-reverse: 아이템을 역순으로 줄바꿈을 한다.
flex-flow
flex-direction과 flex-wrap를 한꺼번에 지정할 수 있는 단축속성이다.
.flex-box {
flex-flow: row wrap
/* 속성의 첫번째 인자로 flex-dirction */
/* 속성의 두번째 인자로 flex-wrap */
}
수평(메인)축 정렬(justify-content)
justify-content: flex-start(기본값), flex-end, center, space-between, space-around, space-evenly
메인축 방향으로 아이템들을 정렬하는 속성이다.(수평으로 정렬)
flex-start: flex-direction
이 row
일때는 가장 왼쪽으로, column
일때는 가장 위를 기준으로 정렬한다.
flex-end: flex-direction
이 row
일때는 가장 오른쪽으로, column
일때는 가장 아래를 기준으로 정렬한다.
center: 아이테을 가운데로 정렬한다.
space-between: 아이템들 사이로 균일한 간격으로 정렬한다.
space-around: 아이템들 둘레로 균일한 간격으로 정렬한다.
space-evenly: 두 항목의 간격이 같도록 정렬한다.
수직(교차)축 정렬(align-items)
align-items: stretch(기본값), flex-start, flex-end, center, baseline
justify-content와 비슷하지만 교차축을 기준으로정렬한다.(justify-content가 수평으로 정렬하면 align-items는 수직으로 정렬한다.)
flex-start: 교차축(세로)의 시작점으로 정렬한다.
flex-end: 교차축의 끝쪽으로 정렬한다.
center: 교차축의 중심으로 정렬한다.
stretch(기본값): 컨테이너를 체운다.(수직축 방향으로 전체를 채운다)
baseline: 아이템들을 텍스트 베이스라인 기준으로 정렬한다.
여러 행 정렬 (align-content)
flex-wrap
flex-start:
flex-end:
center:
stretch:
space-around:
space-between:
출처-CSS3 Flex 쉬운 가이드
출처-CSS3 tricks