• 빠른 이동을 원하시면, 아래 키워드를 클릭하세요!

🌿 넘치는 아이템 내려주기

flex-wrap

flex-item이 여러개일 때, item들의 줄바꿈을 허용할 것인지 말 것인지 결정합니다.

만일 줄바꿈을 허용하지 않을 경우, item이 아무리 많아져도 무조건 한줄에 들어가도록 합니다.

• flex-wrap : nowrap (기본값)

item의 줄바꿈을 허용하지 않습니다.

따라서 item이 아무리 많아져도 무조건 한줄에 들어가게 됩니다.

• flex-wrap : wrap

item의 가로 사이즈가 container의 가로 사이즈를 넘겼을 때, 자연스럽게 다음 줄로 넘어갑니다.

💡 align-items는 flex-items이 한 줄일 때 우선 적용!!

**💡 item이 두 줄 이상인 상태에서 정렬을 원하시면, align-content**라는 속성을 이용해주시면 됩니다.

gap

gap은 자식 요소들 사이의 간격을 지정해주는 속성입니다. Flexbox에서는 자식 요소들이 나란히 배치되는데, 이 사이의 간격을 설정해주는 것이 바로 gap입니다.

상상해보세요. 책상 위에 여러 개의 책이 옆으로 나란히 놓여 있어요. 이 책들 사이에 조금의 공간(간격)을 두고 싶을 때, 바로 이 간격을 만드는 것이 gap입니다. gap을 설정하면 책들 사이의 간격이 일정하게 유지됩니다.

.CSS_부모 {
	display: flex;   /* flexbox 사용 **/
	gap: 20px;       /** 각 아이템 사이에 20px 간격을 줌 */
}

이렇게 하면 .CSS_부모 안에 있는 모든 자식 요소들 사이에 **20픽셀(px)**의 간격이 생기게 됩니다. 이 간격 덕분에 요소들이 서로 붙지 않고 깔끔하게 정렬될 수 있어요.