플렉서블 박스란?
가변적인 박스를 아주 손쉽게 만들수 있는 기술
플렉서블 박스의 기본 개념
- 플렉서블 박스는 부모 박스이다. 즉 부모 박스를 먼저 flex로 선언해야 자식 박스를 사용할 수 있다.
- 플렉서블 박스의 자식 박스는 플렉스 아이템이다.
- 플렉서블 박스의 축 <주축>과 <교차축>
- 주축은 중심이 되는 축으로 해당 축을 기준으로 플렉스 아이템이 배치된다.
- 교차축은 주축의 반대 ex) 주축: 가로 ,교차축: 세로
플렉서블 박스 문법
기본 설정
display :
- flex (박스를 블록 수준의 플렉서블 박스로 작동)
- inline-flex (박스를 인라인 수준의 플렉서블 박스로 작동)
플렉스 아이템의 배치 방향 설정
flex-direction :
- row (박스를 왼쪽에서 오른쪽으로 배치, 설정 시 주축은 가로)
- row-reverse
- column (박스를 위에서 아래로 배치, 설정 시 주축은 세로)
- column-reverse
플렉스 아이템 여러 줄 배치 *방향에 따라 여러 줄을 만든다.
flex-wrap:
- nowrap (박스를 한 줄로 배치, 기본 값)
- wrap (박스를 여러 줄로 배치)
- wrap-reverse (박스를 여러 줄로 역방향 배치)
배치 방향과 여러 줄 배치 한번에 설정
flex-flow: [flex-direction] [flex-wrap]
주축 방향 플렉스 아이템 배치
justify-content:
- flex-start (자식 박스를 부모 박스 주축의 시작점으로 배치, 기본값)
- flex-end (자식 박스를 부모 박스 주축의 끝점으로 배치)
- center (자식 박스를 부모 박스의 중앙으로 배치)
- space-between (빈공간이 있을 시 첫 번째와 마지막 박스는 양쪽끝으로, 나머지는 자동 정렬 배치)
- space-around (빈공간이 있을 시 양쪽 끝에 약간의 공간을 둔 뒤, 자동 정렬 배치)
- space-evenly (빈공간이 있을 시 전부 동일하게 자동 정렬 배치)
교차축 방향 플렉스 아이템 배치
align-items:
- stretch (박스를 확장하여 배치)
- flex-start (박스를 교차축의 시작점에 배치)
- flex-end (박스를 교차축의 끝점에 배치)
- center (박스를 교차축의 중앙에 배치)
align-self: (개별 배치)
- auto (해당 부모 박스의 algin-items 속성 값을 상속 받음)
- 위와 동일
align-content: (여러줄인 경우 다양하게 배치, justify-content와 동일)
플렉스 아이템의 배치 순서
order: (0 or 정수 값)
플렉스 아이템의 크기 조절
flex: [flex-grow] [flex-shrink] [flex-basis]
- flex-grow : 플렉서블 박스 > 플렉스 아이템인 경우, 크기를 늘릴 수 있는 속성
- flex-shrink : 플렉서블 박스 < 플렉스 아이템인 경우, 크기를 줄일 수 있는 속성
- flex- basis : 플렉스 아이템의 기본 크기를 설정하기 위한 속성
- 0 : 속성 값이 그대로 적용
- auto : 플렉스 아이템이 가지고 있는 크기를 기준으로 속성 값 적용
'HTML > CSS' 카테고리의 다른 글
css 중요 문법 (0) | 2022.08.04 |
---|---|
css 초기화 (0) | 2022.08.03 |
미디어 쿼리와 뷰포트 (0) | 2022.07.27 |
가변 그리드 (0) | 2022.07.26 |
반응형 웹 기본 개념 (0) | 2022.07.19 |