CSS3는 일반적으로 Flexbox라고 하는 레이아웃 모드 Flexible Box를 제공합니다. Flexbox(flexible box)는 CSS3의 레이아웃 모드입니다. 이 모드를 사용하면 복잡한 응용 프로그램 및 웹 페이지에 대한 레이아웃을 쉽게 만들 수 있습니다. 여기에는 컨테이너, 플렉스 항목 등이 포함됩니다. 컨테이너에는 다음과 같은 속성이 있습니다. -
-
플렉스 방향
-
플렉스 랩
-
플렉스 플로우
-
콘텐츠 정당화
-
항목 정렬
-
콘텐츠 정렬
다음은 CSS3의 플렉스 레이아웃 모델을 나타내는 코드입니다 -
예시
<!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .container { display: flex; flex-wrap: wrap; justify-content: space-evenly; } .container1 { align-self: flex-start; display: flex; background-color: rgb(71, 30, 255); width: 200px; margin: 20px; } .container1 > div { background-color: #f1f1f1; margin: 10px; padding: 10px; font-size: 30px; } .container2 { display: flex; background-color: rgb(14, 126, 79); width: 200px; justify-content: center; align-self: flex-start; margin: 20px; } .container2 > div { background-color: #f1f1f1; margin: 10px; padding: 10px; font-size: 30px; } .container3 { display: flex; flex-direction: column; background-color: rgb(168, 60, 10); width: 200px; align-items: center; margin: 20px; } .container3 > div { background-color: #f1f1f1; margin: 10px; padding: 10px; width: 20px; font-size: 30px; } </style> </head> <body> <h1>Flex layout example</h1> <div class="container"> <div class="container1"> <div>1</div> <div>2</div> <div>3</div> </div> <div class="container2"> <div>1</div> <div>2</div> <div>3</div> </div> <div class="container3"> <div>1</div> <div>2</div> <div>3</div> </div> </div> </body> </html>
출력