css 코드 작성할때 세미콜론; 꼭 써주기

justify-content

밑에 있는 값을 인자로 받아 요소들을 가로선 상에서 정렬함

flex-start : 요소들을 컨테이너의 왼쪽으로 정렬

flex-end : 요소들을 컨테이너의 오른쪽으로 정렬

center : 컨테이너의 가운데 정렬

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

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

---

1. #pond {
   display: flex;
   justify-content: flex-end;
   }

2. #pond {
   display: flex;
   justify-content: center;
   }

3. #pond {
   display: flex;
   justify-content: space-around
   }

4. #pond {
   display: flex;
   justify-content:space-between // 사이간격이 around보다 넓음
   }

---

align-items

밑에 값을 인자로 받아 요소들을 세로선 상 정렬

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

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

center : 세로선상의 가운데 정렬

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

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

---

6. #pond {
   display : flex;
   justify-content : center;
   align-items : center;
   }

7. #pond {
   display: flex;
   justify-content : space-around;
   align-items : flex-end;
   }

---

flex-direction

밑에 값을 인자로 받아 컨테이너 안에서 요소들이 정렬해야 할 방향을 지정.

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

row-reverse : 요소들을 텍스트의 반대 방향으로 정렬(start와 end의 순서도 바뀜)

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

column-reverse : 요소들을 아래에서 위로 정렬(start와 end의 순서도 바뀜)

8. #pond {
   display: flex;
   flex-direction : row-reverse:
   }

9. #pond {
   display: flex;
   flex-direction : column;
   }

10.

#pond {
display: flex;
flex-direction : row-reverse;
justify-content : flex-end; // start가 아니라 end인 이유는 위에서 row-reverse로 좌우반전을 했기 때문에 start가 아니라 end가 된거임
}

11.

#pond {
display: flex;
flex-direction : column;
justify-cintent : flex-end
}

flex의 방향이 column일 경우 justify-content방향이 세로로,
align-items방향이 가로로 바뀐다.

12. #pond {
    display: flex;
    flex-direction : column-revers;
    justify-content : space-between;
    }

13. #pond {
    display: flex;
    flex-direction : row-reverse;
    justify-content : center;
    align-items: flex-end;
    }

---

order

때때로 row나 column의 순서를 역으로 바꾸는 것만으로는 부족할 때
order사용, order의 기본 값은 0이며, 양수나 음수로 바꿀 수 있다.

14. #pond {
    display: flex;
    }

.yellow {
order:1 -> 노란색을 +1칸 옮긴다는뜻
}

15. #pond {
    display: flex;
    }

.red {
order:-3 -> 빨간색을 -3칸 옮긴다는 뜻
}

---

align-self

개별 요소에 적용할 수 있는 또 다른 속성.
이 속성은 align-items가 사용하는 값들을 인자로 받으며, 그 값들은 지정한 요소에만 적용.(개별 요소만 쏘옥!!)

16. #pond {
    display: flex;
    align-items: flex-start;
    }

.yellow {
align-self : flex-end;
}

17. #pond {
    display: flex;
    align-items: flex-start;
    }

.yellow {
order : 1; //?옆으로한칸아님?
align-self : flex-end;
}

---

flex-wrap

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

18. #pond {
    display: flex;
    flex-wrap: wrap;
    
19. #pond {
    display: flex;
    flex-direction:column;
    flex-wrap: wrap;
    }
    

---

flex-flow

flex-direction과 flex-wrap이 자주 같이 사용되어
flex-flow가 이를 대신할 수 있다. 공백문자(띄어쓰기)를 이용해 두 속성 값을 인자로 받는다.

20. #pond {
    display: flex;
    flex-flow: colimn wrap // 두 속성을 띄어쓰기를 이용해 사용가능
    }

---

align-content

여러줄 사이의 간격을 지정.

flex-start : 여러 줄들을 컨테이너의 꼭대기에 정렬

flex-end : 여러 줄들을 컨테이너의 바닥에 정렬

center : 여러 줄 가운데 정렬

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

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

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

21. #pond {
    display: flex;
    align-content : flex-start;
    }
    
22. #pond {
    display: flex;
    align-content : flex-end;
    }
    
23. #pond {
    display: flex;
    flex-direction : column-reverse;
    align-content : center;
    }
    
24. #pond {
    display: flex;

    flex-direction:column-reverse;// - 요소를 아래에서 위로 정렬

    flex-wrap:wrap-reverse;// - 요소 여러줄을 걸처 반대로 정렬

    justify-content:center;// - 요소들을 가운데정렬

    align-content:space-between;// - 여러줄 사이에 동일한 간격을 준다

    }