FLEXBOX FROGGY

https://flexboxfroggy.com/#ko

Flexbox Froggy

Flexbox Froggy는 Froggy와 친구들 돕는 CSS 코드 게임으로 개구리를 같은 색의 연잎으로 이동하도록 도와주면서 Flex레이아웃 속성을 이해하게 됩니다.

justify-content 

요소들을 가로선 상에서 정렬합니다:

• flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.
• flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.
• center: 요소들을 컨테이너의 가운데로 정렬합니다.
• space-between: 요소들 사이에 동일한 간격을 둡니다.
• space-around: 요소들 주위에 동일한 간격을 둡니다.

align-items

요소들을 세로선 상에서 정렬합니다:

• flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다.
• flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다.
• center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.
• baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다.
• stretch: 요소들을 컨테이너에 맞도록 늘립니다.
  
  

flex-direction

컨테이너 안에서 요소들이 정렬해야 할 방향을 지정합니다:

Flex의 방향이 column일 경우 justify-content의 방향이 세로로, align-items의 뱡향이 가로로 바뀝니다.

• row: 요소들을 텍스트의 방향과 동일하게 정렬합니다.
• row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다.
• column: 요소들을 위에서 아래로 정렬합니다.
• column-reverse: 요소들을 아래에서 위로 정렬합니다.
  
  

order

Flex 요소의 순서를 지정합니다.

-1, 0 (default), 1, ...

 

align-self

지정된 align-items 값을 무시하고 Flex요소를 세로선 상에서 정렬합니다.

flex-start, flex-end, center, baseline, stretch

 

flex-wrap 

Flex 요소들을 한 줄 또는 여러 줄에 걸쳐 정렬합니다.

• nowrap: 모든 요소들을 한 줄에 정렬합니다.
• wrap: 요소들을 여러 줄에 걸쳐 정렬합니다.
• wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬합니다.
  
  

flex-flow

flex-direction과 flex-wrap이 자주 같이 사용되기 때문에, flex-flow가 이를 대신할 수 있습니다.
ex) flex-flow: row wrap;

 

align-content

여러 줄 사이의 간격을 지정할 수 있습니다. 이 속성은 다음의 값들을 인자로 받습니다:

• flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬합니다.
• flex-end: 여러 줄들을 컨테이너의 바닥에 정렬합니다.
• center: 여러 줄들을 세로선 상의 가운데에 정렬합니다.
• space-between: 여러 줄들 사이에 동일한 간격을 둡니다.
• space-around: 여러 줄들 주위에 동일한 간격을 둡니다.
• stretch: 여러 줄들을 컨테이너에 맞도록 늘립니다.

 

 

소호플렉스(Sohoflex) 웹 에이전시
홈페이지 제작, 모바일 앱 제작, SI솔루션 개발, 온라인 마케팅 전문 디지털 트랜스포메이션 회사입니다.