1. 플렉서블 박스 = 부모 박스
- 부모 박스에 플렉서블 박스에서 새로 생긴 특정 속성값을 적용해야 가변적인 박스로 작동
2. 플렉서블 박스의 자식 박스 = 플렉스 아이템
- 자식 박스가 속성값에 의해 작동하는 순간부터 플렉스 아이템이라 부른다
3. 플렉서블 박스의 축 - 주축과 교차축
- 주축 = 중심이 되는 축
- 주축이 가로 -> 왼쪽에서 오른쪽으로 배치
- 주축이 세로 -> 위에서 아래로 배치
- 축의 방향
- 축의 시작과 끝이 존재하는 이유는 플렉스 아이쳄이 처음 배치되는 위치(시작점)와 플렉스 아이템이 마지막에 배치될 위치(끝점)가 필요하기 때문
( 속성 값은 플렉서블 박스에 적용한다. )
※ 익스플로러 11 이상에서 작동. 안드로이드 4.4이상에서 자동
※ 플렉서블 박스는 브라우저 접두사를 사용해야 한다.
★ 기본 설정 (플렉서블 박스)
display : flex (박스를 블록 수준의 플렉서블 박스로 작동)
display : inline-flex (박스를 인라인 수준의 플렉서블 박스로 작동)
★ 플렉스 아이템의 배치 방향 설정
flex-direction : row (기본값) / row-reverse / column / column-reverse
row : 박스를 왼쪽에서 오른쪽으로 배치. 주축은 가로가 됨
row-reverse : 박스를 가로로 배치하되 역방향으로 배치
column : 박스를 위에서 아래로 배치. 주축은 세로가 됨
column-reverse : 박스를 세로로 배치하되 역방향으로 배치
★ 플렉스 아이템을 여러 줄로 배치하기
flex-wrap : nowrap(기본값) / wrap / wrap-reverse
nowrap : 박스를 한 줄로 배치하며, 기본값
wrap : 박스를 여러줄로 배치
wrap-reverse : 박스를 여러 줄로 배치하되 역방향으로 배치
★ 플렉스 아이템의 배치 방향과 여러 줄 배치를 한 번에 설정하기
flex-flow : [flex-direction] [flex-wrap] / row nowrap(기본값)
- 첫 번째 속성값은 박스의 배치 방향을 설정하는 속성의 값을 작성하고,
- 두 번재 속성값은 박스를 여러 줄로 배치하는 속성의 값을 작성 두 속성값 사이는 반드시 한 칸을 띄어야 한다.
★ 주축 방향으로 다양하게 플렉스 아이템 배치하기(가로)
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 속성값을 상속받음.
부모 박스에 적용된 속성값이 없는 경우에는 stretch 속성값이 적용 됨
https://jsfiddle.net/Kimara/eoy79Lwp/14/
★ 여러 줄인 플렉스 아이템을 교차축 방향으로 다양하게 배치하기(세로),
박스가 여러줄이고 감싸는 박스의 높이값이 정해져있을 때 적용 됨 (플렉서블 박스)
align-content: stretch(기본값), flex-start, flex-end, center, space-between, space-around
https://jsfiddle.net/Kimara/eoy79Lwp/25/
★ 플렉스 아이템의 배치순서 바꾸기 (플렉스 아이템)
order : 0(기본값), 정숫값
ex) 총 3개의 박스가 있을 때 현재 아이템이 2번째에 위치한 아이템이라면
oreder:0 => 2번째. 본래의 위치
order:1 => 3번째. 그 다음 위치
order:-1 => 1번째. 그 전의 위치
양수와 음수의 숫자는 관련X. 양과 음으로 구별하는 듯. 위 예시는 총 3개밖에 안되기 때문에?
★ 플렉스 아이템의 크기 늘이고 줄이기
flex: [flex-grow] [flex-shrink] [flex-basis] => 플렉스 아이템에 적용
0 1 auto : 기본값
0 auto : 0 1 auto와 같음
initial : 0 1 auto와 같음
auto : 1 1 auto와 같음
none : 0 0 auto와 같음
flex-grow :
플렉서블 박스에 여백이 있을 때 플렉스 아이템의 크기를 늘일 수 있는 속성.
width, flex-basis 속성값에 따하 늘어나는 크기가 변할 수 있다.
음숫값은 사용할 수 없다.
속성값은 비율로 설정한다.
flex-shrink :
플렉서블 박스 안의 플렉스 아이템의 크기가 넘칠 경우 크기를 줄일 수 있는 속성.
width, flex-basis 속성값에 따하 줄어드는 크기가 변할 수 있다.음숫값은 사용할 수 없다.
속성값은 비율로 설정한다.
flex-basis :
플렉스 아이템의 기본 크기를 설정하기 위한 속성.
음숫값은 사용할 수 없다.
width 속성에서 사용할 수 있는 모든 값을 사용할 수 있다.
https://jsfiddle.net/Kimara/eoy79Lwp/31/
display:flex로 기본 레이아웃 짜기
https://jsfiddle.net/Kimara/6rucsLpf/10/
'Web > Styles' 카테고리의 다른 글
| [CSS] vertical-align (0) | 2018.07.06 |
|---|---|
| [CSS] css기본 규칙들 (0) | 2018.05.21 |
| [CSS] 마우스커서 커스텀 (0) | 2018.05.15 |
| [CSS] 뷰포트 (0) | 2018.05.15 |
| [CSS] 미디어쿼리 (0) | 2018.05.15 |