align-items
🔍부모박스안에서 세로로 자식박스를 정렬하는 속성
align-items를 사용하면 부모박스 안에서 자식 박스를 세로로 정렬할 수 있다.
이때 '세로'는 부모박스의 top에 위치하느냐,middle에 위치하느냐,bottom부분에
위치하는가를 뜻한다.
-align-items : flex-start;
:기본값으로 부모박스의 top부분에 위치한다.
-align-items : flex-end;
:기본값으로 부모박스의 bottom부분에 위치한다.
-align-items : center;
:부모박스의 middle부분에 위치한다.
-align-items : baseline;
:자식 박스들을 부모박스의 시작위치에 정렬한다. (=flex-start와 동일한 결과값)
-align-items : stretch;
:자식 박스들을 부모박스의 높이에 맞게 늘림.이때, 자식박스는 height속성이 없어야함.
flex-direction
🔍자식박스의 나열 방향 설정
자식박스를 부모박스 안에서 block속성처럼 세로로 정렬하거나, 기본값처럼 가로로 정렬할 때 사용함.
속성값에 -reverse가 붙으면 start와 end자리가 바뀌게 된다.
또한 column으로 속성값이 적용되면 justify-content의 자리와 align-items의 자리도 바뀐다.
자식박스를 부모박스 안에서 block속성처럼 세로로 정렬하거나, 기본값처럼 가로로 정렬할 때 사용함.
-flex-direction : row;
:기본값으로 flex를 적용한 기본 모습과 같이 가로로 자식 박스들이 나열된다.
-flex-direction : row-reverse;
:자식박스들을 가로로 반전시킨다. x축의 방향이 바뀜 -> / <-
-flex-direction : column;
:자식박스들을 위에서 아래로 나열함. x와 y축이 바뀜.
-flex-direction : column-reverse;
:자식박스들을 세로로 반전시킨다. y축의 방향이 바뀜
