[CSS] 플렉서블 박스 간단 사용법
프로그래밍2017. 9. 10. 22:04
반응형
CSS 플렉서블 박스에 대한 간단 사용법 입니다.
기본 속성
display : flex / inline-flex
- flex: 박스를 블록 수준의 플렉서블 박스로 작동하게 함
- inline-flex: 박스를 인라인 수준의 플렉서블 박스로 작동하게 함
아이템의 배치 방향 설정하기
flex-direction : row / row-reverse / column / column-reverse
- row : 기본 설정 값. 박스를 왼쪽에서 오른쪽으로 배치. 주축은 가로 / 교차축은 세로
- row-reverse : 박스를 오른쪽에서 왼쪽으로 배치
- column : 박스를 위에서 아래로 배치
- column-reverse : 박스를 아래에서 위쪽으로 배치
아이템을 여러 줄로 배치하기
flex-wrap : nowarp / wrap / wrap-reverse
- nowrap : 기본 설정 값. 박스를 한줄로 배치
- warp : 박스를 여러 줄로 배치
- wrap-reverse : 박스를 여러 줄로 배치하는데 순서는 wrap 의 반대 (주축이 가로인 경우 아래에서 위로, 주축이 세로인 경우 오른쪽에서 왼쪽으로 배치)
배치 방향과 여러 줄 배치 설정을 같이 하기
flex-flow : [flex-direction] [flex-wrap]
주축 방향의 아이템 배치 / 정렬
justify-content : flex-start / flex-end / center / space-between / space-around
- flex-start : 기본 설정 값. 박스틀을 주축의 시작점부터 쌓아서 배치
- flex-end : 박스들을 쌓아서 주축의 끝점으로 배치
- center : 박스들을 쌓아서 주축의 중앙에 배치
- space-between : 박스들 사이에 공백을 넣어서 배치
- space-around : 박스들 사이와 시작, 끝에 공백을 넣고 배치
교차축 방향의 아이템 배치 / 정렬
align-items : stretch / flex-start / flex-end / center / baseline
- stretch : 기본 설정 값. 박스를 교차축 방향으로 늘려서 배치
- flex-start : 박스를 교차축 시작점 기준으로 배치
- flex-end : 박스를 교차축 끝점 기준으로 배치
- center : 박스를 교차축의 중앙에 배치
- baseline : 박스들을 교차축의 시작점에 배치되는 자식 박스의 글자 베이스라인에 맞춰서 배치
교차축 방향으로 아이템들을 개별적으로 배치하기
align-self : auto / stretch / flex-start / flex-end / center / baseline
- auto : 부모의 align-items 속성을 상속
(나머지는 align-items 설명을 참조)
여러 줄의 아이템을 교차축 방향으로 배치 / 정렬 하기
align-content : stretch / flex-start / flex-end / center / space-between / space-around
(justify-content, align-items 의 설명을 참조)
플렉스 아이템의 배치 순서 지정하기
order : 정수 (기본값 0)
큰 숫자가 뒤쪽으로 배치되며, 숫자가 같은 경우 먼저 작성된 태그가 앞에 배치
음수는 0으로 간주됨
플렉스 아이템의 크기 비율 지정
flex : [flex-grow] [flex-shrink] [flex-basis]
- flex-grow : 여백이 있는 경우 아이템의 크기를 비율대로 늘려주는 속성
- flex-shrink : 아이템의 크기가 지정한 박스 크기 보다 큰 경우 줄여주는 속성
- flex-basis : 아이템의 기본 크기를 설정하기 위한 속성
반응형