개념 1. 플렉서블 박스 = 부모 박스
플렉서블 박스에서 부모 박스는 가변적인 박스로 작동하기 위한 기본 개념이다.
마치 wrap처럼 모든 요소를 감싸고 있는 존재이기도하다.
이 부모 박스에 플렉서블 박스에서 새로 생긴 특정 속성값을 적용해야 가변적인 박스로 작동하게 된다.
개념 2. 플렉서블 박스의 자식 박스 = 플렉스 아이템
부모 박스가 플렉서블 박스로 작동한 순간부터 그 안의 자식 박스들은 '플렉스 아이템'이라는 이름을 달고 작동하게 된다.
부모 박스가 속성값이 적용되어 가변적인 박스로 작동하는 순간부터 플렉서블 박스로 불리듯이 자식 박스 역시 속성 값에 의해 작동하는 순간부터 플렉스 아이템이라고 불리게 된다.
개념 3. 플렉서블 박스의 축 - 주축과 교차축
건축물에는 건물을 지탱하기 위한 기둥이 있듯이 플렉서블 박스에도 플렉스 아이템(자식박스)를 지탱하기 위한 기둥과 같은 존재인 축이 두 개가 있다. 이를 '주축' 과 '교차축' 이라고 한다.
주축이 중심이 되는 축으로 이 주축을 따라 플렉스 아이템이 배치된다. 주축이 가로일 경우 박스들이 왼쪽에서 오른쪽으로 배치되고 반대로 주축이 세로일 경우 박스들이 위에서 아래로 배치된다.
교차축은 주축에 교차하는 축으로, 주축이 가로일 경우, 교차축은 세로가 된다. 반대로 주축이 세로일 경우 교차축은 가로가 된다.
축의 방향
축에서 가장 중요한 부분은 바로 '축의 방향'이다. 축의 방향은 플렉스 아이템의 배치 방향을 설정하기 위해 사용하는 속성값에 따라 결정된다.
예를들어 플렉스 아이템의 배치 방향을 가로로 설정하면 주축 방향은 가로, 교차축 방향은 세로가 된다.
그러면 플렉스 아이템은 왼쪽에서 오른쪽으로 배치된다. 반대로 플렉스 아이템의 배치방향을 세로로 설정하면 주축 방향은 세로가 되고, 교차축 방향은 가로가 된다. 그리고 플렉스 아이템은 위에서 아래로 배치된다.
축의 시작과 끝
건물의 기둥에도 시작되는 부분과 끝 부분이 있듯이 축에도 시작과 끝이 있다. 축에 시작과 끝이 존재하는 이유는 플렉스 아이템이 처음 배치되는 위치(시작점)와 플렉스 아이템이 마지막에 배치될 위치(끝점)가 필요하기 때문이다. 만약 시작과 끝이 없다면 플렉스 아이템은 어디서부터 배치되어야 하고 어디까지 배치되어야 할지 몰라 박스가 제멋대로 배치될 수도 있다
플렉스 박스의 크기와 축의 방향이 결정될 때 축의 시작과 끝도 함께 결정된다.
플렉서블 박스 기술 익히기
display : flex → 박스를 블록 수준의 플렉서블 박스로 작동하게 한다.
inline-flex -> 박스를 인라인 수준의 플렉서블 박스로 작동하게 한다.
플렉스 아이템의 배치 방향 설정하기
flex-direction
- row(기본값) : 박스를 왼쪽에서 오른쪽으로 배치한다. 해당 속성값으로 설정 시 주축은 가로가 되고, 교차축은 세로가된다
- row-reverse : 박스를 가로로 배치하되 역방향으로 배치한다. 즉 오른쪽에서 왼쪽을오 배치한다. 해당 속성값으로 설정 시 주축은 가로가 되고, 교차축은 세로가 된다.
- column : 박스를 위에서 아래로 배치한다. 해당 속성값으로 설정 시 주축은 세로가 되고, 교차축은 가로가 된다.
- column-reverse : 박스를 세로로 배치하되 역방향으로 배치한다. 즉 아래에서 위로 배치한다. 해당 속성값으로 설정 시 주축은 세로가 되고, 교차축은 가로가 된다.
플렉스 아이템을 여러 줄로 배치하기
flex-wrap
- nowrap(기본값) : 박스를 한 줄로 배치한다.
- wrap : 박스를 여러 줄로 배치한다.
- wrap-reverse : 박스를 여러 줄로 배치하되 역방향으로 배치한다. 즉 주축이 가로일 때에는 아래에서 위로, 주축이 세로일 때는 오른쪽에서 왼쪽으로 배치한다.
플렉스 아이템의 배치 방향과 여러 줄 배치를 한 번에 설정하기
flex-flow [flex-direction] [flex-wrap]
- row nowrap(기본값)
첫 번째 속성 값은 박스의 배치 방향을 설정하는 속성의 값을 작성하고, 두 번째 속성값은 박스를 여러 줄로 배치하는 속성의 값을 작성한다.
첫번째 속성값과 두번째 속성값의 사이는 반드시 한 칸 띄어야한다.
주축 방향으로 다양하게 플렉스 아이템 배치하기
- flex-start(기본값) : 자식 박스를 부모 박스 주축의 시작점으로 배치한다.
- flex-end : 자식 박스를 부모 박스 주축의 끝점으로 배치한다.
- center : 자식 박스를 부모 박스의 중앙으로 배치한다.
- space-between : 플렉서블 박스에 빈 공간이 있을 때 사용한다. 첫 번째 박스와 마지막 박스는 양쪽 끄틍로 붙이고, 나머지 박스는 동일한 간격으로 정렬된다.
- space-around : 플렉서블 박스에 빈 공간이 있을 때 사용한다. 단 양쪽 끝에 있는 박스의 양 옆에도 공간을 둔 채 자동 정렬된다.
교차축 방향으로 다양하게 플렉스 아이템 배치하기
- flex-start : 박스를 교차축의 시작점에 배치.
- flex-end : 박스를 교차축의 끝점에 배치
- center : 박스를 교차축의 중앙에 배치.
- stretch : 박스를 확장해서 배치하고 기본값이다
- baseline : 자식 박스들을 교차축의 시작점에 배치되는 자식 박스의 글자 베이스라인에 맞춰 배치한다. 시작점에 배치되는 자식 박스는 교차축의 시작점과 글자 베이스라인의 거리가 가장 먼 박스가 교차축의 시작점에 배치된다.