flexbox는 main-axis와 cross axis로 구성되어 있습니다. 그리고 justify-content는 main-axis를 기준으로 content의 배치해주는 역활을합니다. align-items는 cross axis를 기준으로 content의 배치해주는 역활을합니다.
flexbox의 정렬 방향을 결정하는건 flex-flow나 flex-direction을 이용해서 변경가능합니다.
flex에 대한 초간단 접근법
1. 부모에게 스타일로 "display : flex" 를 준다
---> 자 이제 내가 품은 자식들은 flex박스 룰을 따르도록 하자.
2. 그 후 부모에게 스타일로 "flex-direction : "column" 을 준다
---> 근데 세로방향 기준으로 할거야
(참고로 flex-direction을 설정하지 않으면 기본은 "row" 즉, 가로방향입니다)
3. 그 후
justify content = flex-direction의 방향에 따라 정렬 요리조리 함.
align-items = flex-direction 방향의 반대쪽을 요리조리 정렬함.
따라서, flex-dicretion이 column 즉, 세로면
justify-content 는 세로축을 기준으로 요리조리 정렬하고,
align-items 는 가로축을 기준으로 요리조리 정렬합니다.
display: flex
자식 박스의 방향과 크기를 결정
부모 박스의 자식 요소는 왼쪽부터 차례대로 이어 배치
부모에게 스타일로 display: flex 를 주면 그 요소의 자식들은 모두 flex 룰을 따르게 된다.
방향 지정
flex-direcction
row (기본값) :
row-reverse
column
column-reverse
flex: <grow> <shrink> <basis>
grow : 팽창지수, 자식 박스가 얼마나 늘어날지
shrink : 수축지수, 자식 박스가 얼마나 줄어들지
basis : 기본크기
justify-content
컨텐츠 수평 정렬
flex-start
flex-end
center
space-between
space-around
space-evenly
align-items
컨텐츠 수직 정렬
flex-start
flex-end
center
stretch
baseline
Reference
flexbox 연습할 수 있는 사이트