Appearance
第10章：项目对齐与排序
在本节中，我们将介绍Grid布局中的项目对齐与排序属性，这些属性用于控制单个项目的对齐方式和排列顺序。
10.1 align-self：单独设置单个项目的垂直对齐
align-self属性用于单独设置单个项目在交叉轴（垂直方向）上的对齐方式，覆盖容器的align-items属性。
语法
css
.item {
align-self: <value>;
}常用值
auto：继承容器的align-items值flex-start：靠交叉轴起点对齐flex-end：靠交叉轴终点对齐center：在交叉轴居中对齐stretch：拉伸至填满交叉轴baseline：按文字基线对齐
代码示例
html
<!DOCTYPE html>
<html>
<head>
<title>align-self</title>
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 150px;
gap: 10px;
background-color: #f0f0f0;
padding: 10px;
align-items: stretch; /* 容器默认对齐方式 */
}
.item {
background-color: #3498db;
color: white;
padding: 10px;
border-radius: 4px;
}
.item1 {
align-self: flex-start;
}
.item2 {
align-self: center;
}
.item3 {
align-self: flex-end;
}
</style>
</head>
<body>
<h1>align-self 示例</h1>
<div class="container">
<div class="item item1">align-self: flex-start</div>
<div class="item item2">align-self: center</div>
<div class="item item3">align-self: flex-end</div>
</div>
</body>
</html>10.2 justify-self：单独设置单个项目的水平对齐
justify-self属性用于单独设置单个项目在主轴（水平方向）上的对齐方式，覆盖容器的justify-items属性。
语法
css
.item {
justify-self: <value>;
}常用值
auto：继承容器的justify-items值flex-start：靠主轴起点对齐flex-end：靠主轴终点对齐center：在主轴居中对齐stretch：拉伸至填满主轴
代码示例
html
<!DOCTYPE html>
<html>
<head>
<title>justify-self</title>
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px;
gap: 10px;
background-color: #f0f0f0;
padding: 10px;
justify-items: stretch; /* 容器默认对齐方式 */
}
.item {
background-color: #e74c3c;
color: white;
padding: 10px;
border-radius: 4px;
width: 80px;
}
.item1 {
justify-self: start;
}
.item2 {
justify-self: center;
}
.item3 {
justify-self: end;
}
</style>
</head>
<body>
<h1>justify-self 示例</h1>
<div class="container">
<div class="item item1">justify-self: start</div>
<div class="item item2">justify-self: center</div>
<div class="item item3">justify-self: end</div>
</div>
</body>
</html>10.3 order：控制项目的排列顺序
order属性用于控制项目的排列顺序，与Flex布局中的order属性用法一致。
语法
css
.item {
order: <number>;
}说明
- 默认值：0
- 数值越小，排列越靠前
- 可以使用负数
代码示例
html
<!DOCTYPE html>
<html>
<head>
<title>order</title>
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
background-color: #f0f0f0;
padding: 10px;
}
.item {
background-color: #2ecc71;
color: white;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
border-radius: 4px;
}
.item1 {
order: 3;
}
.item2 {
order: 1;
}
.item3 {
order: 2;
}
</style>
</head>
<body>
<h1>order 示例</h1>
<div class="container">
<div class="item item1">项目1 (order: 3)</div>
<div class="item item2">项目2 (order: 1)</div>
<div class="item item3">项目3 (order: 2)</div>
</div>
<p>项目按照 order 值从小到大排列：项目2 (1) → 项目3 (2) → 项目1 (3)</p>
</body>
</html>10.4 实战场景：调整特定项目位置、对齐方式
代码示例：混合使用对齐与排序
html
<!DOCTYPE html>
<html>
<head>
<title>混合使用对齐与排序</title>
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px 100px;
gap: 10px;
background-color: #f0f0f0;
padding: 10px;
justify-items: stretch;
align-items: stretch;
}
.item {
background-color: #9b59b6;
color: white;
padding: 10px;
border-radius: 4px;
}
.item1 {
order: 2;
align-self: center;
justify-self: center;
}
.item2 {
order: 1;
align-self: flex-end;
justify-self: flex-start;
}
.item3 {
order: 3;
align-self: flex-start;
justify-self: flex-end;
}
.item4 {
order: 4;
align-self: center;
justify-self: flex-start;
}
.item5 {
order: 5;
align-self: flex-end;
justify-self: center;
}
.item6 {
order: 6;
align-self: flex-start;
justify-self: flex-end;
}
</style>
</head>
<body>
<h1>混合使用对齐与排序</h1>
<div class="container">
<div class="item item1">项目1</div>
<div class="item item2">项目2</div>
<div class="item item3">项目3</div>
<div class="item item4">项目4</div>
<div class="item item5">项目5</div>
<div class="item item6">项目6</div>
</div>
</body>
</html>实操练习
- 创建一个网格，使用
align-self设置不同项目的垂直对齐方式 - 创建一个网格，使用
justify-self设置不同项目的水平对齐方式 - 创建一个网格，使用
order调整项目的排列顺序 - 混合使用这三个属性，实现复杂的布局效果
通过本节的学习，你已经掌握了Grid布局中的项目对齐与排序属性。这些属性可以帮助你更加灵活地控制单个项目的对齐方式和排列顺序，实现更加个性化的布局效果。