(HTML, CSS) justify-content, align-items, align-content에 대해 알아보기

justify-content: 중심축에서 아이템들을 어떻게 배치할지 결정한다.

1. justify-content: flex-start: 왼쪽을 기준으로 배치

2. justify-content: flex-end 오른쪽을 기준으로 배치

flex-direction: row-reverse와 유사하지만 배치 순서가 바뀌지 않는다는 차이점이 있다.

 

3. justify-content: center  가운데 배치

4. justify-content: space-around  각 박스마다 spacing이 들어가 있다  ▶ 1번과 10번이 벽 쪽에 붙어있다.

5. justify-content: space-evenly 각 박스마다 동일한 spacing이 들어가 있다. ▶ 1번과 10번도 똑같이 떨어짐

6. justify-content: space-between 1번과 10번 박스를 양 끝에 붙이고 동일한 spacing 유지

align-items: 반대축에서 아이템들을 어떻게 배치할지 결정한다.

1. align-items: center 중심축을 기준으로 반대 축에서 가운데 정렬해준다.

2.aling-items:flex-end 텍스트를 아래로 배치한다. 

 

 

 

 

3. align-items: baseline 텍스트를 균등하게 배치한다. 

baseline 미적용 

▼

baseline 적용된 모습

align-content: 반대축에 아이템을 지정한다.

1. align-content: space-between 위와 아래는 딱 붙어 있으며 중간 아이템에 space가 들어간다.

미적용 모습

space-between이 적용된 모습