flex

• 부모에 적용되는 요소들(아이템들의 부모)

flex-direction

• row / column / row-reverse / column-revers
• flex방향

flex-wrap

wrap / wrap-revers

• float처럼 화면이 줄어들면 자동으로 아래로 떨어진다.

justify-content

flex-start / center / flex-end
/ space-between(사이 공간을 일정하게 둔다) / space-around(양 끝에도 여백을 둔다)

• row 방향으로 정렬 했을 때는 좌우 양 옆의 방향 정렬을 뜻 한다.(수평방향)
• 예) flex들을 오뎅이라 생각하고 꼬치로 꽂았을 때 오뎅이 꼬치 어디에 위치 시킬 건지

align-items

stretch(기본 값으로 아래로 끝까지 늘어난 상태)
/ flex-start(늘어나지 않고 영역 크기 만큼으로 줄고(inline처럼) 위로 붙는다)
/ flex-end / center /

• row방향으로 정렬 했을 때 상하 위아래 방향 정렬을 뜻 한다.(수직방향)

align-content

flex-start / flex-end / center /
space-between(위아래로 붙고 중간에 일정한 여백이 생긴다.) / space-around

• (flex-wrap: wrap)일때만 적용 가능

• wrap상태 일때 content의 위치를 어디로 이동할 것인가 결정

• 자식에게 적용되는 요소들(실제 정렬되는 아이템)

flex-grow

flex-grow: 1 / flex-grow: 2

• 위 처럼 숫자를 지정해 주는데 각각 아이템들에게 나누어줄 여백 비율을 나타내는 것
• 예를 들어 아이템들을 배치 후 부모에게 남은 여백이 있다. 그 여백들을 자식들에게 어떠한 비율로 나누어 줄것인지 비율을 나타내는 것이다. (첫번째 아이템에게는 1만큼 여백을 나눠주고.. 생략)
• 원래 점유하고 있는 공간이 있기 때문에 실제 비율은 1:2가 되지 않는다. 실제 비율을 1:2로 하고 싶으면 아래 flex-basis를 활용하면 된다.
• 즉 주축에서 남는 공간을 항목들에게 분배하는 방법 (반대 : shrink)

flex-basis

flex-basis: 0 (기본 auto)

• 원래 점유하는 공간을 0으로 해준다. 그런 뒤 flex-grow로 여백 비율을 지정해 주면
  전부다 여백으로 인식해서 전체비율이 1:2가 된다.

flex-shrink

• 주축의 공간이 부족할때 각 항목의 사이즈를 줄이는 방법
• 더 큰 flex-shrink 값을 갖는 항목의 사이즈가 더 빨리 줄어든다.
• grow와 사용법은 동일

flex

• 축약형 사용시 자동으로 basis값이 0이 된다 즉 화면의 비율이 된다.
• 축약형의 값은 flex-grow, flex-shrink, flex-basis 순서로 지정
• 처음 아이템의 값은 flex 값을 주지 않고 두번째 값만 flex값을 준다면 나머지 여백이 두번째 아이템으로 전부 채워진다. (화면을 늘려서 두번째 아이템으로 채워짐)

align-self

• 각각 아이템들에게 align값을 따로 적용 할 수 있다.

order

• order: 1, order: 2
• 각 각 위치 순서를 지정 할 수 있다.

참고영상 : https://www.youtube.com/watch?v=eprXmC_j9A4&t=479s