컨테이너 선언
부모에 display:flex를 줘야 자식이 flex item으로 배치된다.
부모 속성주축 선택
flex-direction: row는 가로, column은 세로를 주축으로 만든다.
axis first주축 정렬
justify-content로 시작/끝/중앙/간격 배치를 정한다.
main axis교차축 정렬
align-items로 반대 축의 늘림, 중앙, 기준선을 정한다.
cross axisrow + justify
가로 방향 정렬
space-between은 아이템 사이 남는 가로 공간을 분배한다.
메뉴바/툴바
column + justify
세로 방향 정렬
direction을 column으로 바꾸면 justify-content가 위아래 위치를
제어한다.
카드 내부 세로 배치
align-items
교차축 한 줄 정렬
row에서는 세로, column에서는 가로 정렬을 맡는다.
stretch 기본값 한계
flex-wrap
여러 줄이 생기는 조건
wrap 후 줄 사이 간격은 align-content, 줄 안 아이템은
align-items가 다룬다.
두 속성 구분