Grid和Flex布局简介
Grid和Flex布局是CSS中两种强大的布局方式，它们各自具有独特的特点和适用场景。
Grid布局
Grid布局是一个二维布局系统，它允许开发者通过定义行和列来创建一个网格容器，并将子元素放置在网格的特定位置。
知识点：
- 使用
display: grid;或display: inline-grid;来定义一个网格容器。 - 使用
grid-template-rows和grid-template-columns来设置网格的行数和列数。 - 使用
grid-gap（或row-gap和column-gap）来设置网格项之间的间距。 - 使用
grid-template-areas来命名网格区域，并指定网格项应放置在哪个区域。 - 使用
grid-row和grid-column来指定网格项所占的行和列。
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 50px 350px 50px;
gap: 5px;
text-align: center;
grid-template-areas:
"h h h h h h h h h h h h"
"m m c c c c c c c c c c"
"f f f f f f f f f f f f";
}
.header {
grid-area: h;
background-color: #bbf1bb;
}
.menu {
grid-area: m;
background-color: #fde886;
}
.content {
grid-area: c;
background-color: #8afcf9;
}
.footer {
grid-area: f;
background-color: #dfb8f8;
}
</style>
</head>
<body>
<div class="container">
<div class="header">Header</div>
<div class="menu">Menu</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
思考总结：
Grid布局非常适合用于全局布局，因为它可以创建一个二维的网格系统，并允许开发者精确地控制每个网格项的位置和大小。此外，Grid布局还支持命名网格区域，这使得布局更加直观和易于维护。
Flex布局
Flex布局是一个一维布局系统，它主要基于内容来布局元素，并允许元素在容器内灵活地伸缩和对齐。
知识点：
- 使用
display: flex;或display: inline-flex;来定义一个flex容器。 - 使用
flex-direction来指定主轴的方向（即元素的排列方向）。 - 使用
flex-wrap来指定是否换行。 - 使用
justify-content来指定元素在主轴上的对齐方式。 - 使用
align-items来指定元素在交叉轴上的对齐方式。 - 使用
flex-grow、flex-shrink和flex-basis来控制元素的伸缩比例和基准值。
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.flex-container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.flex-item {
background-color: #cde1d5;
padding: 10px;
margin: 5px;
flex-grow: 1;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
</body>
</html>
思考总结：
Flex布局非常适合用于局部布局，特别是当需要元素在容器内灵活伸缩和对齐时。Flex布局以内容为基础，允许元素在主轴和交叉轴上自由地对齐和分布，这使得它非常适合用于创建响应式和自适应的布局。
