CSS3를 사용하여 Flex 항목을 래핑하려면 flex-wrap 속성이 사용됩니다. 래핑을 활성화하려면 값 래핑을 설정하십시오.
다음은 CSS3를 사용하여 플렉스 항목의 래핑을 활성화하는 코드입니다 -
예시
<!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .container { height: 300px; display: flex; width: 300px; border: 2px solid red; flex-wrap: wrap; } div { width: 150px; height: 100px; color: white; text-align: center; font-size: 20px; } .first { background-color: rgb(55, 0, 255); } .second { background-color: red; } .third { background-color: rgb(140, 0, 255); } </style> </head> <body> <h1>Flex wrap example</h1> <div class="container"> <div class="first">First Div</div> <div class="second">Second Div</div> <div class="third">Third Div</div> </div> </body> </html>
출력
위의 코드는 다음과 같은 출력을 생성합니다 -