Ⅰ. Flex로 레이아웃을 만들기 위한 기본구조
부모요소인 .container가 Flex container
자식요소인 .item이 Flex item이다.
Ⅱ. Flex container에 적용하는 속성
01. display: flex; 『flex를 적용하겠다』
컨테이너에 flex를 적용하게될 때 나오는 모습니다.
아이템들은 콘텐츠의 width와 height만큼만 차지하게 된다. 위에는 아이템들에 width를 줘서 확인할 수 없으니 해당 내용을 주석처리하고 확인해보면 이렇다.
display로 inline-flex를 줄 수도 있는데, 컨테이너가 주변요소와 어떻게 어우러질지 결정하는 값이다. inline-block처럼 동작한다.
02. flex-direction 『배치방향 설정』
1) row (기본값) 아이템들이 행(가로) 방향으로 배치 2) row-reverse 아이템들이 역순으로 가로 배치 3) column 아이템들이 열(세로) 방향으로 배치 4) column-reverse 아이템들이 역순으로 세로 배치03. flex-wrap 『줄넘김 처리』
Flex container는 자식의 크기가 자신보다 크다고 해서 강제로 조절하지 않는다. 자식요소를 감싸준다. 즉, 자식요소(Flex item)를 품기 위해서 자식들의 줄바꿈을 어떻게 할지 결정하는 속성이다.
1) nowrap (기본값) 줄바꿈을 하지 않는다. 넘치면 그냥 삐져 나간 상태로 있게 된다. 2) wrap★ 줄바꿈을 한다. float이나 inline-block으로 배치한 요소들과 비슷하게 동작한다. 3) wrap-reverse 줄바꿈 하는데, 아이템을 역순으로 배치한다.04. flex-flow 『배치방향과 줄넘김 처리를 한번에』
05. justify-content 『메인축 방향 정렬』
06. align-items 『수직축 방향 정렬』
수직축 방향으로 아이템을들 정렬하는 속성이다.
1) ★ stretch (기본값) 아이템들이 수직축 방향으로 끝까지 늘어난다. 2) flex-start 아이템들을 시작점으로 정렬한다. flex-direction이 row(가로 배치)일 때는 위, column(세로 배치)일 때는 왼쪽이 시작점이다. 3) flex-end 아이템들을 끝으로 정렬한다. flex-direction이 row(가로 배치)일 때는 아래, column(세로 배치)일 때는 오른쪽이 끝이다. 4) center 아이템들을 가운데로 정렬한다. 5) baseline 아이템들을 텍스트 베이스라인 기준으로 정렬한다.justify-content: center;
align-item: center;
를 해주면, 아이템을 이렇게↓ 한 가운데에 놓는 것도 매우 쉽습니다.
07. align-content 『여러 행 정렬』
Ⅲ. Flex item에 적용하는 속성
01. flex-basis; 『아이템 박스의 기본 크기』
★ 아이템의 기본 크기를 설정한다.
width, height와 다른점은 axis 방향에 따라 달라진다는 것이다. flex-direction이 row일 때는 너비, column일 때는 높이를 지정한다. 그리고 내부의 컨텐츠에 따른 유연한 크기이다. 기본값은 auto이며 auto일 때는 width, height 값을 사용한다.
만약 flex-basis 값이 적용되어 있다면 width, height 값은 무시된다.
02. flex-grow 『flex 아이템이 기본크기보다 커질(grow) 수 있게 할까? 얼마나 크게 할까?』
★ 아이템이 flex-basis의 값보다 커질 수 있는지, 얼마나 커지게 할지 결정하는 속성이다.
flex-grow에는 숫자값이 들어가는데,
0보다 큰 값이 적용되면 해당 아이템이 유연한(Flexible) 박스로 변하고 원래의 크기보다 커지며 빈 공간을 균등하게 메우게 된다. '빈 공간'의 개념은 아래 사진을 통해서 확인.
(기본값이 0이기 때문에, 따로 적용하기 전까지는 아이템이 늘어나지 않는다)
flex-grow에 들어가는 숫자의 의미는,
아이템들의 flex-basis(기본크기)를 제외한 여백 부분을 flex-grow에 지정된 숫자의 비율로 나누어 가진다는 것이다.
flex-grow : 1 —> 아이템들이 모두 동일한 크기의 공간을 할당받는다.
flex-grow : 2 —> 특정한 하나의 자식에게만 적용할 경우 다른 아이템보다 두배의 공간을 할당받는다.
아이템들의 여백을 1:2:1의 비율로 세팅할 경우,
.item:nth-child(1) { flex-grow: 1; }
.item:nth-child(2) { flex-grow: 2; }
.item:nth-child(3) { flex-grow: 1; } 
03. flex-shrink 『↔ flex-grow, 유연하게 줄이기』
flex-grow와 반대되는 속성으로, 아이템이 flex-basis의 값보다 작아질 수 있는지를 결정한다.
여기도 숫자값이 들어가는데,
0보다 큰 값이 세팅이 되면 해당 아이템이 유연한(Flexible) 박스로 변하고 flex-basis(기본크기)보다 작아진다.
(기본값이 1이기 때문에, 따로 세팅하지 않아도 아이템이 기본크기보다 작아진다)
flex-shrink를 0으로 세팅하면 아이템의 크기가 flex-basis보다 작아지지 않기 때문에 고정폭의 컬럼을 쉽게 만들 수 있다. 고정 크기는 width로 설정한다.
04. align-self 『수직축으로 아이템 정렬』
부모의 align-items 속성을 덮어 flex-item 에게 개별적인 align-items 속성을 부여한다. 기본값은 align-items와 마찬가지로 stretch 이다.
05. order 『배치 순서』
각 아이템들의 시각적 나열 순서를 결정하는 속성이다.
숫자값이 들어가며, 작은 숫자일 수록 먼저 배치된다. 수가 작을 수록 더 우선 순위를 부여 받는다(음수도 사용가능). 시각적 순서일 뿐, HTML 자체의 구조를 바꾸는 것은 아니므로 접근성 측면에서 사용에 주의해야 한다.
시각 장애인분들이 사용하는 스크린 리더로 화면을 읽을 때, order를 이용해 순서를 바꾼 것은 의미가 없다.
06. z-index 『position에서의 z-index와 같은 개념』
