1. 부모
display: flex;
// 자식들을 flex 방식으로 정렬한다.
flex-direction: row; // 또는 column; row-reverse; column-reverse;
// 정렬을 가로로 할 것인지 세로로 할 것인지
justify-content: flex-start; // 또는 flex-end; space-between; space-around;
// direction에서 결정한 방향으로 어떻게 정렬할 것인지 (main axis)
align-items: flex-start; // 또는 flex-end; center;
// direction에서 결정하지 않은 방향으로 어떻게 정렬할 것인지 (cross axis)
flex-wrap: nowrap; // 기본값
// 자식의 width보다 화면이 줄어들어도 줄바꿔서 배치하지 않고 자식의 폭을 줄인다.
// 자식의 width를 설정했어도 상관하지 않는다.
// wrap으로 설정하면 줄바꿈한다.
align-content: space-between;
// 자식이 두 줄로 나눠졌을 때 생기는 각 가로 라인을 어떻게 배치할지 정한다.
// 방향만 90도로 다를 뿐 justify-content랑 동일하게 작동한다.
2. 자식
align-self: flex-start; // 또는 flex-end;
// 적용한 자식만 따로 움직인다.
order: 0; // 기본값
// order에 따라서 오름차순으로 자식의 위치가 달라진다.
flex-shrink: 1; // 기본값
// 부모의 폭이 좁아질 때 줄어드는 비율을 정한다.
// 모든 자식 설정했다고 했을 때 grid의 fr과 같은 방식으로 비율이 설정된다.
// 2로 했을 경우 다른 자식보다 2배로 줄어든다.
flex-grow: 0; // 기본값
// 부모의 폭이 넓어질 때 공간이 생기면 1 이상의 값을 준 자식이 늘어난다.
// 다른 자식도 1 이상으로 설정했을 때 숫자에 비례해서 각 자식이 차지하는 너비가 달라진다.