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在一维布局中的灵活性。
