flex를 사용할때 확인할점은
1.flex를 어디에 선언할 것인가
2.가로방향, 세로방향
3.한줄에 모두 정렬할 것인지 아닌지
크게 세가지로 나눌 수 있습니다.
flex는 정렬하고자 하는 요소들을 감싸고 있는 부모 요소에 display:flex;를 적용해야 합니다.
정렬을 어느 방향으로 할지 정해줘야 합니다.
flex-direction:row;
flex-direction:coloum;
flex-direction을 정해줄때 보이지 않는 두개의 Axis가 생성됩니다.
flex-direction 방향을 따라 생성되는 main axis와
main axis와 수직방향을 이루는 cross axis 두가지 축입니다.
1. flex-direction: row;
가로방향으로 정렬할때 사용합니다. 방향은 왼쪽에서 오른쪽으로 정렬이 됩니다.
main axis는 row와 같은 방향을 이루는 왼쪽에서 오른쪽으로 생성되며
cross axis는 main axis와 수직을 이루는 위에서 아래로 생성됩니다.
2. flex-direction: column;
세로방향으로 정렬할때 사용합니다. 방향은 위에서 아래로 정렬이 됩니다.
main axis는 row와 같은 방향을 이루는 위에서 아래로 생성되며
cross axis는 main axis와 수직을 이루는 왼쪽에서 오른쪽으로 생성됩니다.
3. flex-direction: row-reverse;
row를 반대로 정렬할때 사용합니다. 방향은 오른쪽에서 왼쪽으로 정렬이 됩니다.
main axis는 row-reverse와 같은 방향을 이루는 오른쪽에서 왼쪽으로 생성되며
cross axis는 main axis와 수직을 이루는 아래서 위로 생성됩니다.
4. flex-direction: column-reverse;
column을 반대로 정렬할때 사용합니다. 방향은 아래에서 위로 정렬이 됩니다.
main axis는 column-reverse와 같은 방향을 이루는 아래쪽에서 위쪽으로 생성되며
cross axis는 main axis와 수직을 이루는 오른쪽에서 왼쪽로 생성됩니다.
flex-wrap: ; 요소를 wrap으로 감쌀지를 결정합니다.
1.flex-wrap:nowrap; 요소를 (nowrap) 감싸지 않고 자식요소의 사이즈를 줄여서라도 한줄에 정렬합니다.
자식요소의 크기를 줄여서 한줄로 만듭니다.
2.flex-wrap:wrap; wrap으로 감싸서 공간이 부족하면 자식요소의 크기를 줄이지 않고 여러 줄로 층을 나눠서 배치합니다.
자식요소의 크기가 변하지 않고 여러 줄로 자식요소들이 배치됩니다.
