Flexbox Froggy 풀면서 CSS flexbox 공부하기

CSS FlexBox Froggy https://flexboxfroggy.com/

1. justify-content

: 요소들을 가로선상에 정렬

justify-content : flex-start	//왼쪽으로 정렬
justify-content : flex-end	//오른쪽으로 정렬
justify-content : center	//가운데 정렬
justify-content : space-between	//요소 사이 동일한 간격
justify-content : space-around	//요소 주위에 동일한 간격

2. align-items

: 요소들을 세로선상에 정렬

align-items : flex-start	//꼭대기에 정렬
align-items : flex-end		//바닥에 정렬
align-items : center		//가운데 정렬
align-items : baseline		//시작위치에 정렬
align-items : stretch		//컨테이너에 맞게 늘리기

3. flex-direction

: 요소들을 정렬하는 방향을 지정

flex-direction : row		//가로로 정렬
flex-direction : row-reverse	//가로로 거꾸로
flex-direction : column		//세로로 정렬
flex-direction : column 	//세로로 거꾸로
 

4. order

: 요소의 순서 지정

.seondal {
order : 3	//오른쪽으로 3칸
order : -3	//왼쪽으로 3칸
}

.seondal {
align-self : flex-bottom	//whkakrkr만 세로로 맨 야래 정렬
}

6. flex-wrap

: 요소 나열 줄 수 설정

flex-wrap : nowrap		//한줄에 정렬
flex-wrap : wrap		//여러줄에 정렬
flex-wrap : wrap-reverse	//여러줄에 거꾸로 정렬

7. flex-flow

= flex-direction + flex-wrap

flex-flow :  row-reverse wrap	//여러줄에 걸쳐 가로로 거꾸로 정렬
flex-flow : column nowrap	//한줄에 세로로 정렬

8. align-contents

: 컨테이너 사이의 간격 (줄)

align-content : flex-start	//꼭대기에 정렬
align-content : flex-end		//바닥에 정렬
align-content : center		//가운데 정렬
align-content : space-between	//줄사이 같은 간격
align-content : space-around	//줄사이 같은 간격
align-content : stretch		//여러 줄들을 컨테이너에 맞게 늘리기