[HTML & CSS] Display: Flex (스압 주의)

안녕하세요 동기 여러분! 오늘은 요소들을 가지런히 웹 페이지 안에 정렬하는 방법에 대해 알아봅시다!

 

Display: Flex

 지난 시간까지 사용했던 예제를 보면 사진들이 촥 정렬이 되어 있는 것을 볼 수 있는데요, 코드 적용 전과 후를 비교해보면서 알아보도록 하겠습니다.

 

적용 전 

 

위의 사진은 아래의 코드를 뺀 상태입니다.

.items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

 

코드를 한 줄 한 줄 적용해보고 어떤 기능이 있는지 적어보겠습니다.

 

display: flex; 적용 후

• display: flex;만 적었을 경우 flex-wrap의 속성은 자동으로 nowrap으로 지정이 되기 때문에 위 사진과 같이 사진이 행으로 쭉 나열되는 모습을 볼 수 있습니다.(그래서 가로 스크롤이 생김)

 

flex-wrap: wrap; 적용 후

• 가로 스크롤이 사라지고 하나의 행으로 쭉 나열되었던 사진(요소)들이 복수(여러)행으로 나뉘어 정렬을 한 모습입니다. 
• 각각의 사진(요소)들이 여러 행에 나열되도록 하기 위해 flex-wrap의 값을 wrap로 설정해줍니다.

 

justify-content: center; 적용 후

아주 깔끔하게 중앙으로 정렬한 모습을 확인할 수 있습니다.

justify-content

• justify-content: start;
• justify-content: center;
• justify-content: space-between;
• justify-content: space-around;
• justify-content: space-evenly;

위 다섯 가지의 실행화면이 궁금하신 분들은 아래의 링크로 방문하셔서 CSS Demo: justify-content를 클릭해보세요!
링크 : https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

justify-content - CSS: Cascading Style Sheets | MDN

 

---

오늘의 느낌

코로나는 안 끝나려나보다. 얼마 전에 코로나가 터진 시기에 입대한 장병들이 전역을 했다고 뉴스에서 봤다. 벌써 그렇게 오래된 건가...