flex box froggy

justify-content 속성

• flex-start:요소들을 컨테이너 왼쪽으로 정렬
• flex-end: 요소들을 컨테이너의 오른쪽으로 정렬(개구리 오른쪽으로 이동시킴)
• center: 요소들을 컨테이너의 가운데로 정렬
• space-between:요소들 사이에 동일한 간격을 둠.
• space-around: 요소들 주위에 동일한 간격을 둠.

ex.

    #pond {
     display:flex;
     justify-content: flex-end;
     //한 마리 개구리를 오른쪽으로 이동시킨다.
     
      justify-content:space-around;
     //세마리의 개구리 모두 수련잎으로 이동.
     //이 때 수련잎 주위에 많은 간격이 있었음.
     
      justify-content:space-between;
      //세마리 개구리 모두 수련잎으로 이동.
      // 수련잎은 동일한 간격이 있음.
      }

align-items-css속성

이 css속성은 다음의 값들을 인자로 받아 요소들을 세로선상에 정렬.

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

flex-direction

이 속성은 아래의 값들을 인자로 받아 컨테이너 안에서 요소들이 정렬해야 할 방향을 지정합니다.

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

---

@column-reverse 또는 row-reverse를 사용하면 요소들의 start와 end의 순서도 뒤바뀐다.

---

@flex-direction 방향이 column일 경우
justifycontent의 방향이 세로로 바뀌고
align-items의 방향이 가로로 바뀐다.

---

order

은 개별적으로 이동 시킬 수 있다.
-1,0,1,2,3 등 정수만 사용 가능하다.

.yellow {
order:2
}

라면 노란색을 2만큼 오른쪽으로 이동시킨다는 말이다.

---

align-self

.yellow {
align-self:flex-end
}
yellow만 밑바닥으로 보내기.

---

flex-wrap 속성

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

---

flex-flow

flex-direction과 flex-wrap이 자주 같이 사용되기 때문에
flex-flow가 이를 대신할 수 있다.

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

• flex-flow: row wrap;

세로 선상의 여러줄에 걸쳐 정렬하기 위해서는

+flex-flow: column wrap;

---

align-content

이것을 사용하여 여러 줄 사이의 간격을 지정할 수 있다.

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