✅FelxBox

flexbox는 행과 열 형태로 항목 무리를 배치하는 일차원 레이아웃 메서드이다. 항목은 부족한 공간에 맞추기 위해 축소되거나 여분의 공간을 채우기 위해 변형된다.

1. flex

• flex container : 아이템들을 감싸는 container를 가진다. 아이템들을 감싸는 부모영역이다.
• flex item : 내부에 담여있는 요소들(아이템들)이다.

2. main axis, cross axis

main axis

• 주축. 즉, x축을 뜻한다.

cross axis

• 교차측. 즉, y축을 뜻한다.

만약 flex-direction : column이라면 주축은 y축이 되고 교차축은 x축이 된다.
또한 reverse이면 flex-start는 flex-end처럼, flex-end는 flex-start처럼 반대로 적용이 된다.

3. Container - display

display : 블록과 인라인요소 중 어느 쪽으로 처리할지와 함께, flow, grid, flex처럼 자식요소를 배치할 때 사용할 레이아웃을 설정한다.

display : flex로 하면 요소를 flex로 적용한다는 뜻이다.

outside : 외부 디스플레이 유형을 설정하는 키워드
inside : 요소의 내부 디스플레이 유형을 설정하는 키워드

display : inline-flex 이렇게 적용을 하면 외부 디스플레이 유형은 inline 내부 디스플레이 유형은 flex로 적용가능하다. 밖에 요소들과의 관계와 안쪽 관계를 한번에 적용가능하다.

4. Container - flex-direction

• flex container 내의 item을 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정한다.

row : 한 행인 형식. 기본값
row-reverse : 한 행인 형식이고 역방향
column : 한 열인 형식. 내려가는 형식
column-reverse : 한 열인 방식이고 역방향

5. Container - flex-wrap, flex-flow(shrthand) 단축속성

• flex-wrap
• flex-wrap은 item을 강제로 한줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러행으로 나누어 표현할 것인지 결정하는 속성이다.
• 만약, 영역 내에서 벗어나지 못하게 설정한다면, 동시에 요소의 방향 축을 결정할 수 있다.

nowrap : 기본값이다. 줄바꿈 하지 않는다.
wrap : 영역을 초과할 경우 줄바꿈 한다.

위에 결과는 nowrap 즉, 기본값일 때 결과이다. 각 영역은 width가 50px이지만 전체 영역인 container가 160px이라 줄바꿈되어 2줄로 될 것 같지만 160px에 맞춰서 각 영역들 넓이가 적용이 된다. 즉, 선언한 50px값이 적용이 되지 않는다.

위에는 flex-wrap를 wrap로 적용한 결과이다. width 160px을 초과하여 2번째 줄에 item들이 나열된 것을 확인할 수 있다.

• flex-flow
• flex-flow는 direction과 flex-wrap을 동시 사용하는 단축속성이다.

6. item - order

• flex 또는 grid container 안에서 현재 요소의 배치 순서를 지정한다. container item의 정렬 순서는 오름차순이고 order값이 같은 값일 경우 소스코드의 순서대로 정렬된다.
• 초기값은 다 order : 0이다.

4번째와 5번째에 order : -1을 적용했을때 초기값이 0이기 때문에 4번째, 5번째 div가 1번째 div앞에 오게 된다. 6번째 div에는 -2를 적용했기 때문에 제일 작은 값이므로 제일 앞에 오게 된다. order는 값에 따라 정렬을 할 수 있다.

7. item - flex-grow

• flex-item 요소가, flex-container 요소 내부에서 할당 가능한 공간의 정도를 선언한다.
• 만약 형제 요소로 렌더링된 모든 flex-item 요소들이 동일한 flex-grow 값을 갖는다면, flex-container 내부에서 동일한 공간을 할당받는다.
• 음수는 사용 불가능하다.
• 다시 정리하면, 남은 공간을 아이템들끼리 나눠서 가진다.

자식요소에 flex-grow : 1을 적용한 결과이다. 그러면 남은 결과를 자식들 끼리 1:1 비율로 나눠가진다는 뜻이다.
근데 위에 결과에서는 두번째 줄에만 나눠 가지는 이유는 flex-wrap을 적용하였기 때문이다.
즉, 첫번째 줄은 첫번째 줄 자식들끼리 남은 공간은 나눠 가지고 두번째 줄은 두번째 줄 자식들 끼리 남은 공간을 나눠 가지는 것이다.

8. item - flex-shrink

• flex-item 요소의 flex-shrink 값을 설정하는 속성이다.
• 만약, flex-item 요소의 크기가 flex-container 요소의 크기보다 클 때 flex-shrink 속성을 사용하는데, 설정된 숫자값에 따라 flex-container 요소 내부에서 flex-item 요소의 크기가 축소된다.

9. itme - flex-basis

• flex item의 초기 크기를 지정한다. box-sizing을 따로 지정하지 않는다면 content-box의 크기를 변경한다.

10. item - flex(shorthand) 단축속성

• 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성이다.
• flex는 grow, shrink, basis의 단축 속성이다.

flex는 주의해야하는 점이 있다.
만약, grow, shrink를 0, 1로 지정하면 basis는 지정하지 않았기 때문에 basis가 auto값이 되지 않는다.
따라서, 값을 입력한 키워드만 적용이 된다. 값을 두개만 입력하면 grow, shrink만 적용이 된다.

11. Container - justify-content

• 주축을 기준으로 아이템들을 어떻게 정렬할지에 대한 속성이다.

flex-start : 주축 시작이 되는 위치부터 정렬하겠다 라는 뜻이다.
flex-end : 끝에서부터 정렬하겠다 라는 뜻이다.
center : 가운데 정렬
space-between : 사이에 간격들이 동일하게 나누고 배치 첫번째와 마지막 요소는 딱 붙어있다.
space-around : 간격들이 동일하게 나누어 배치되고 첫번째와 마지막은 동일하게 나누어진 간격에 절반이 앞뒤에 공간이 생긴다.

12. Container - align-items

• justify-content는 주축에 정렬이라고 하면 align-items는 교차축에 대한 정렬이다.
• 전체 컨테이너에서 flex를 어디에 배치할 것인지 쉽게 생각하면 몇번째 줄에 위치할 것인지를 정한다.
• align-itmes는 각 item를 어떻게 배치할 것인지를 지정한다.

wrap으로 적용하여 여러줄이면 사실상 각 줄의 영역을 container로 본다. 그래서 이 상태에서 align-items center를 하면 각각의 줄을 컨테이너로 보면 그 줄의 가운데에 배치하게 된다.

flex-start: 교차축에 첫번째에 위치하겠다.
flex-end : 교차축에 마지막에 위치하겠다.
center : 가운데에 정렬하겠다

align-items는 space-between, space-around 사용이 불가능하다.

13. Container - align-content

• content 사이와 content 주위 빈 공간을 플렉스박스의 교차축, 그리드의 블록 축을 따라 배치하는 방식을 결정한다.

align-items와 align-content가 헷갈리면 쉽게 여러줄이면 align-content를 사용하고 한줄이면 align-items를 사용한다고 생각하면 된다.

flex-start : 교차축 시작점에 딱 붙는다.
flex-end : 교차축 끝에 딱 붙는다.
center : 가운데에 정렬

align-content는 space-between과 space-around 사용이 가능하다.
뒤에 content가 붙으면 space-between과 space-around 사용이 가능하다고 생각해도 될 것 같다.

14. item - align-self

• 자기자신에게 속성을 부여한다.

예시로

nth-child(4){
	align-self : flex-grow 
}

를 하게 된다면 그 요소만 시작점에 위치하게 된다.