flex로 정렬하기

 

게임을 이용하여 CSS기초 flex 마스터하기 !

 

flex를 모르는 초보자라도 쉽게 게임으로 이해할 수 있는 사이트를 이용하여 flex 테그들을 공부하였다.

개구리를 연잎에 올리는 방법을 코드로 치면 다음단계로 넘어가는 간단한 게임이지만 한눈에 보기 쉽게 사용해볼 수 있다는게 큰 장점이라고 생각한다.

 

https://flexboxfroggy.com/#ko

Flexbox Froggy

 

 

 

---

flex의 정렬 테그 정리

 

1. 가로 정렬하기

justify-content: flex-start
: 요소들을 컨테이너의 왼쪽으로 정렬합니다.

justify-content: flex-end
: 요소들을 컨테이너의 오른쪽으로 정렬합니다.

justify-content: center
: 요소들을 컨테이너의 가운데로 정렬합니다.

justify-content: space-between (sb)
: 요소들 사이에 동일한 간격을 둡니다.

justify-content: space-around (sa)
: 요소들 주위에 동일한 간격을 둡니다.

 

 

 

2. 세로 개체 정렬하기

align-items: flex-start
: 요소들을 컨테이너의 꼭대기로 정렬합니다.

align-items: flex-end
: 요소들을 컨테이너의 바닥으로 정렬합니다.

align-items: center
: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.

align-items: baseline
: 요소들을 컨테이너의 시작 위치에 정렬합니다.

align-items: stretch
: 요소들을 컨테이너에 맞도록 늘립니다.

​

​

 

3. 역, 방향 전환하기

flex-direction: row
: 요소들을 텍스트의 방향과 동일하게 정렬합니다.

flex-direction: row-reverse
: 요소들을 텍스트의 반대 방향으로 정렬합니다.

flex-direction: column
: 요소들을 위에서 아래로 정렬합니다.

flex-direction: column-reverse
: 요소들을 아래에서 위로 정렬합니다.

​

​

 

4. 개체 선택 정렬하기

※ 잘 사용되지 않음

order : (1 , 0 , -1 ...)
: 1 = 한칸 앞으로 / 0 = 그대로 / -1 = 한칸 뒤로

align-self : ( flex-start , flex-end , center , baseline , stretch )
: 개체 하나만 선택해서 움직일 수 있음

​

​

5. 줄 정렬하기

flex-wrap: nowrap
: 모든 요소들을 한 줄에 정렬합니다.

flex-wrap: wrap
: 요소들을 여러 줄에 걸쳐 정렬합니다.

flex-wrap: wrap-reverse
: 요소들을 여러 줄에 걸쳐 반대로 정렬합니다.

flex-fleow: cloumn wrap
: flex-direction: column + flex-wrap: wrap 와 같은 효과를 줄 수있는 테그를 하나로 쓸 수 있음

 

 

 

6. 여러 줄들 사이의 간격 정렬하기

align-content: flex-start
: 여러 줄들을 컨테이너의 꼭대기에 정렬합니다.

align-content: flex-end
:여러 줄들을 컨테이너의 바닥에 정렬합니다.

align-content: center
:여러 줄들을 세로선 상의 가운데에 정렬합니다.

align-content: space-between
: 여러 줄들 사이에 동일한 간격을 둡니다.

align-content: space-around
: 여러 줄들 주위에 동일한 간격을 둡니다.

align-content: stretch
: 여러 줄들을 컨테이너에 맞도록 늘립니다.