CSS Grid 和 Flex 是現代 CSS 佈局的兩大支柱，它們提供了強大的工具來建立複雜和響應式的佈局。本文將介紹如何使用 CSS Grid 和 Flex 來實現對角線佈局。
問題來源：滴滴前端一面面試題
對角線佈局效果
Grid 實現對角線佈局
CSS Grid 是一種二維佈局系統，允許我們在水平和垂直方向上同時控制元素的排列。以下是使用 Grid 實現對角線佈局的示例程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.grid-container {
width: 300px;
height: 300px;
display: grid;
grid-template-areas:
'area1 . .'
'. area2 .'
'. . area3';
background-color: gainsboro;
}
.grid-container>div {
background: pink;
width: 100%;
height: 100%;
}
.item-1 {
grid-area: area1;
}
.item-2 {
grid-area: area2;
}
.item-3 {
grid-area: area3;
}
</style>
</head>
<body>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
在上述程式碼中，我們定義了一個.grid-container，它使用 grid-template-areas 屬性來建立三個區域，這三個區域形成了對角線佈局。每個div元素透過 grid-area 屬性被放置在相應的區域。
Flex 實現對角線佈局
以下兩種方法都基於 Flex 佈局來實現對角線佈局的效果，使用display: flex;來建立一個flex容器，但它們在實現方式上存在一些差異。
方法一更接近於實現一個對角線佈局，因為它透過align-self屬性在交叉軸上調整了專案的位置。而方法二雖然嘗試透過不同的justify-content值來實現佈局的變化，但並沒有真正達到對角線佈局的效果。
方法一：設定 align-self 實現對角線佈局
直接在
.flex-container內部放置三個div元素，每個div代表一個專案；透過設定
.item-2和.item-3的align-self屬性來實現對角線佈局。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>flex</title>
<style>
* {
padding: 0px;
margin: 0px;
}
.flex-container {
width: 300px;
height: 300px;
overflow: hidden;
display: flex;
background-color: gainsboro;
justify-content: space-between;
}
.flex-container>div {
width: 33%;
height: 33%;
background: pink;
}
.item-2 {
align-self: center;
}
.item-3 {
align-self: flex-end;
}
</style>
</head>
<body>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
方法二：設定 justify-content 實現對角線佈局
在
.container外部容器內部，分別放置三個.flex-container元素，每個.flex-container內部再放置一個p元素，每個p代表一個專案。透過為每個
.flex-container設定不同的justify-content屬性值來實現不同位置的對齊，但這種方式並沒有真正實現對角線佈局，因為justify-content屬性影響的是主軸上的對齊，而不是交叉軸。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>flex</title>
<style>
* {
padding: 0px;
margin: 0px;
}
.container {
width: 300px;
height: 300px;
background-color: gainsboro;
}
.flex-container {
display: flex;
}
.item-1 {
justify-content: flex-start;
}
.item-2 {
justify-content: center;
}
.item-3 {
justify-content: flex-end;
}
p {
width: 100px;
height: 100px;
background: pink;
}
</style>
</head>
<body>
<div>
<div class='flex-container item-1'>
<p>1</p>
</div>
<div class='flex-container item-2'>
<p>2</p>
</div>
<div class='flex-container item-3'>
<p>3</p>
</div>
</div>
</body>
</html>
小結
本文介紹了 CSS Grid 和 Flexbox 兩種現代 CSS 佈局技術在實現對角線佈局中的應用。透過對比兩種技術的不同實現方法，我們可以看到CSS Grid在二維佈局控制上的強大能力，以及Flexbox在一維佈局中的靈活性。
