CSS3는 일반적으로 Flexbox라고 하는 레이아웃 모드 Flexible Box를 제공합니다. Flexbox(flexible box)는 CSS3의 레이아웃 모드입니다. 이 모드를 사용하면 복잡한 응용 프로그램 및 웹 페이지에 대한 레이아웃을 쉽게 만들 수 있습니다. 여기에는 컨테이너, 플렉스 항목 등이 포함됩니다. 컨테이너에는 다음과 같은 속성이 있습니다. -
-
플렉스 방향
-
플렉스 랩
-
플렉스 플로우
-
콘텐츠 정당화
-
항목 정렬
-
콘텐츠 정렬
다음은 flexbox를 사용한 고급 CSS 레이아웃 코드입니다 -
예시
<!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;
background-color: lightblue;
}
.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 class="container1">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
</body>
</html> 출력
위의 코드는 다음과 같은 출력을 생성합니다 -
