[MiniProject] Flexbox 및 Grid정렬/공백 설정하기

미니프로젝트를 하다보니
grid와 flexbox를 구현하면서 컨텐츠와 텍스트가 마음대로
정렬되지 않아 정리함.

justify: 가로
align : 세로
라고 생각하면 편하겠다.

flexbox 정렬 및 공백

1.justify-content : 주축(수평방향)을 중심으로 정렬

2-1. align-items : 컨테이너 내의 모든 아이템들을 교차축 방향으로 정렬
flexbox와 grid 레이아웃에서 사용

.container {
    display: flex;
    align-items: center; /* 모든 아이템을 교차 축 방향으로 중앙에 정렬 */
}

2-2. align-content : 교차축(수직방향)을 중심으로 정렬
여러행 또는 열이 있는 경우, 컨테이너 내의 행 또는 열들을 교차 축 방향으로 정렬.
flexbox와 grid 레이아웃에서 여러줄 , 여러 열일때 효과적

.container {
    display: flex;
    flex-wrap: wrap; /* 여러 줄로 나뉨 */
    align-content: space-between; /* 여러 줄을 수직 방향으로 공간을 동일하게 분포 */
}

2-3. align-self : 특정 아이템만 교차축 방향으로 정렬
(부모의 'align-items'설정을 덮어 쓰는 기능)

.container {
    display: flex;
    align-items: center; /* 기본적으로 모든 아이템을 중앙에 정렬 */
}

.item {
    align-self: flex-end; /* 특정 아이템을 교차 축 방향으로 끝에 정렬 */
}