[수업노트](20.11.11)D+24 flex froggy/ flex정리

1. justify-content : 가로 선상 정렬

 - flex-start : 요소들을 컨테이너 좌측 정렬

 - flex-end : 요소들을 컨테이너 우측 정렬

 - center : 요소들을 컨테이너 중앙 정렬

 - space-between : 요소들 사이에 동일한 간격

 - space-around: 요소들 주위에 동일한 간격

---

2. align-items : 세로 선상 정렬

 - flex-start : 요소들을 컨테이너 상단 정렬

 - flex-end : 요소들을 컨테이너 하단 정렬

 - center : 요소들을 컨테이너 세로선상 중앙정렬

 - base-line : 요소들을 컨테이너 시작위치 정렬

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

---

3. flex-direction : 컨테이너 내의 요소들의 정렬방향

 - row : 기본값, 요소들을 텍스트 방향과 동일 정렬

 - row-reverse : 요소들을 텍스트 방향과 반대 정렬

 - column : 요소들을 위에서 아래로 정렬

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

 

※ flex방향이 column일 경우, justify-content는 세로

                                      align-items는 가로가 된다.

---

4. order : 각 아이템들의 위치를 컨테이너 내에서 음수, 양수의 값으로 세부 조정 가능.

---

5. align-self : 개별요소에 적용 할 수 있는 또다른 속성.

                  align-items가 사용하는 값을 인자로 받고 그 값은 지정 요소에만 적용 된다.

 

---

6. flex-wrap : 한줄 또는 여러 줄 정렬

 - nowrap : 모든 요소 한 줄 정렬

 - wrap :  모든 요소 여러 줄에 걸쳐 정렬

 - wrap-reverse :  모든 요소 여러 줄에 걸쳐 반대 방향 정렬

---

7. flex-flow : flex-direction+flex-wrap

  ex ) { flex-flow: nowrap row; }

---

8. align-content : 여러 줄 사이의 간격

- flex-start : 여러줄을 상단 정렬

 - flex-end : 여러줄을 하단 정렬

 - center : 여러줄을 세로선상 가운데 정렬

 - space-between : 여러 줄들 사이에 동일한 간격

 - space-around: 여러 줄들 주위에 동일한 간격

 - stretch : 여러줄을 컨테이너에 맞도록 늘린다.

※ align-content는 여러줄 사이 간견 지정

   align-items는 컨테이너 내에서 요소들을 어떻게 정렬하는지 지정

   한 줄만 있는 경우, align-content 효과 없음