Computer >> 컴퓨터 >  >> 프로그램 작성 >> CSS

CSS3 유연한 상자 레이아웃

<시간/>

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;
   background-color: lightblue;
}
.container1 {
   align-self: flex-start;
   display: flex;
   background-color: rgb(71, 30, 255);
   width: 200px;
   margin: 20px;
}
.container1 > div,
.container2 > div,
.container3 > div,
.container4 > 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;
}
.container3 {
   display: flex;
   flex-direction: column;
   background-color: rgb(168, 60, 10);
   width: 200px;
   align-items: center;
   margin: 20px;
}
.container4 {
   background-color: rgb(26, 10, 168);
   width: 200px;
   margin: 20px;
}
</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="container4">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
</body>
</html>

출력

위의 코드는 다음과 같은 출력을 생성합니다 -

CSS3 유연한 상자 레이아웃