https://studiomeal.com/archives/197 (참고)

ㅋㅋ 아 좀 야무지게 작성한 듯

1. flex container

display: flex;

2. flex item

flex container의 자식요소

3. main axis (주축)

flex item의 방향 (LR or RL)

flex-direction:row;/ 가로방향 LR
flex-direction: column; / 세로방향 RL

4. cross axis (교차축)

;90deg of main axis

column-reverse / 교차축 가로

row-reverse / 교차축 세로

flex-wrap

flex-wrap: wrap;
flex-wrap: nowrap;
display flex 보통 어디에 써야하지

축약형

flex-direction과 flex-warp 합쳐진게 flex-flow

flex-flow: row wrap;
flex-flow: column nowrap;

5. main-axis 주축 맞춤

justify-content(main-axis 중심으로 맞춤)

justify = main-axis임을 인지할것 LR 아님

margin 과 똑같은 출력을 하기 위해 justify 사용
justify-content: space-between;
justify-content: space-around; / 평면으로 봐서 그렇지 사실상 원기둥처럼 360도 회전시킨셈
justify-content: space-evenly; / tq 뭐꼬 around랑 뭐가 다르냐;
justify-content: flex-start; / 시작점부터 배치
justify-content: flex-end; / 끝쪽부터 배치
justify-content: center; / 중앙배치

6. across-axis 교차축 맞춤

6-1. align-items (across-axis 사용하지 않고 맞춤)

align-items: flex-start;
align-items: center;
align-items: flex-end;

6-2. align-contents (across-axis 사용하고 맞춤)

align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-between;
align-content: space-around;
align-content: space-evenly; / evenly가 상하 박스 간의 틈이 조금 더 좁음 ㅋㅋ