flexbox

Flexbox 종류

1) container

container 에 적용할 수 있는 속성 값이 존재한다. container 는 item 으로 구성되어 있다.

- display 
- flex-direction : direction of the main axis
- flex-wrap : 줄에 겹치는 것. 
- flex-flow : flex-direction + flex-wrap
- justify-content : 가로선 상에서 정렬
- align-items : 세로선 상에서 정렬
- align-content

justify-content

flex-start: Items align to the left side of the container.
flex-end: Items align to the right side of the container.
center: Items align at the center of the container.
space-between: Items display with equal spacing between them.
space-around: Items display with equal spacing around them.

align-content

flex-start: Items align to the top of the container.
flex-end: Items align to the bottom of the container.
center: Items align at the vertical center of the container.
baseline: Items display at the baseline of the container.
stretch: Items are stretched to fit the container.

flex-direction

row: Items are placed the same as the text direction.
row-reverse: Items are placed opposite to the text direction.
column: Items are placed top to bottom.
column-reverse: Items are placed bottom to top.

flex-wrap

nowrap: Every item is fit to a single line.
wrap: Items wrap around to additional lines.
wrap-reverse: Items wrap around to additional lines in reverse.

align-content

flex-start: Lines are packed at the top of the container.
flex-end: Lines are packed at the bottom of the container.
center: Lines are packed at the vertical center of the container.
space-between: Lines display with equal spacing between them.
space-around: Lines display with equal spacing around them.
stretch: Lines are stretched to fit the container.

2) item

- order  : the order of flex item
- flex-grow
- flex-shrink
- flex
- align-self : align-items 를 셀프로 하는 것. 

3) 중심 축

중심 축(main axis) 가 수평, 수직이냐에 따라서 cross axis가 달라지고, 배치가 달라진다.

참고 사항

Flexbox Froggy 게임
Material Design Color Tool
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

출처

https://www.youtube.com/watch?v=7neASrWEFEM