Flex의 경우

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

예를 들어, justify-content: flex-end;는 개구리를 오른쪽으로 이동시킵니다.

flex-direction을 사용하여 개구리들이 자기 색깔과 같은 수련잎 위로 이동할 수 있도록 도와주세요. 이 CSS 속성은 다음의 값들을 인자로 받아 컨테이너 안에서 요소들이 정렬해야 할 방향을 지정합니다:

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

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

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

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

align-items의 경우

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

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

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

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

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

align-self는 개별 요소에 적용할 수 있는 또 다른 속성.
align-items는 align-self가 사용하는 값들을 인자로 받으면서 그 값들은 지정한 요소에만 적용된다

*간혹 이렇게해도 넘겨지지 않느 경우에는
order 값을 사용한다.예를 들어,노란색 개구리를 오른쪽으로 한발짝 옮기고 싶은 경우
EX) order:1;






flex-wrap의 경우,

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

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

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

이처럼 flex-direction과 flex-wrap이 자주 같이 사용 되기 때문에 대신 할 수 있는 것이 있다.

바로바로바로!!!!

flex-flow이다. 이 속성은 공백문자를 이용하여 두 속성의 값들을 인자로 받는다.예를 들어,요소돌을 가로선 상의 여러줄에 걸쳐 정렬하기 위해서는

flex-flow: row wrap을 사용 할 수 있다.