CSS 2. Justify-Content (Flex contatiner)

<유데미 강의 The Web Developer 부트캠프 2024의 내용을 참고하여 작성함>

Justify-Content

flexbox의 주축을 기준으로 요소와 콘텐츠를 어떻게 배치할지 결정하는 속성.

---

●  justify-content 예시

HTML (왼쪽) , CSS (오른쪽)

#container는 flexbox 가 되었고,

flex-direction속성이 row- reverse이므로 주축의 진행방향이 오른쪽→왼쪽이 되어

실행된 결과이다. 

---

#container 에 justify-content: flex-start; 속성을 추가하면

 

flex-start는 주축의 시작부분을 기준으로 flex-item을 정렬하기 때문에 

주축의 진행방향이 ( 오른쪽 → 왼쪽 )으로 동일하여 그 전과 그대로이다.

justify-content: flex-start;

---

#container 에 justify-content: flex-end; 속성을 추가하면

 

flex end;는 주축의 끝부분(왼쪽)을 기준으로 flex item을 정렬하여 왼쪽으로 정렬된 것을 볼 수 있다.

justify-content: flex-end;

---

#container의 속성을 justify-content: center; 으로 바꾸면,

 

주축의 중앙을 기준으로 flex-item을 정렬하므로 아래와 같은 결과가 나온다.

justify-content: center;

---

justify-content: space-around;

주축을 기준으로 flex-item을 일정한 간격으로 정렬. 

요소의 둘레에 똑같은 면적의 여백을 가지고 있어 요소들 사이의 간격이 다 같지는 않다.

---

justify-content: space-between;

justify-content:space-between;

바깥쪽 여백을 다 없애고 flex-item 요소들 사이에만 같은 공간을 띄움.

---

justify-content: space-evenly;

justify-content:space-evenly;

flex-item 요소들을 일정한 간격으로 정렬.

 

---

위의 예제에서 주축의 방향을 상 →  하로 바꾼 결과도 알아보기 위해,

 

결과값이 잘 보이게

width: 50%;

height :1500px;로 변경했다.

 

flex-direction: column; 으로 주축의 방향을 상 →  하로 바꾼 후

justify-content 속성들을 추가하면 다음과 같은 결과들이 나온다.

---

justify-content: flex-start; ( 속성을 추가하기 전과 같은 결과 )

---

justify-content: flex-end;

---

justify-content: center;

---

justify-content: space-around; 

justify-content: space-around;

---

justify-content: space-between; 

---

justify-content: space-evenly;