CSS Grid 与 Flex 布局教程
项目目录结构及介绍
css-grid-flex/
├── README.md
├── css/
│ ├── grid.css
│ └── flex.css
├── index.html
└── js/
└── main.js
- README.md: 项目说明文件,包含项目的基本介绍和使用说明。
- css/: 存放CSS文件的目录。
- grid.css: 用于实现Grid布局的CSS文件。
- flex.css: 用于实现Flex布局的CSS文件。
- index.html: 项目的入口文件,展示Grid和Flex布局的示例。
- js/: 存放JavaScript文件的目录。
- main.js: 项目的JavaScript文件,可能包含一些交互逻辑。
项目的启动文件介绍
index.html 是项目的启动文件,它包含了基本的HTML结构,并引入了必要的CSS和JavaScript文件。以下是 index.html
的基本内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid 与 Flex 布局示例</title>
<link rel="stylesheet" href="css/grid.css">
<link rel="stylesheet" href="css/flex.css">
</head>
<body>
<h1>CSS Grid 与 Flex 布局示例</h1>
<div class="grid-container">
<!-- Grid 布局示例 -->
</div>
<div class="flex-container">
<!-- Flex 布局示例 -->
</div>
<script src="js/main.js"></script>
</body>
</html>
项目的配置文件介绍
项目中没有显式的配置文件,所有的配置都通过HTML和CSS文件来实现。以下是 css/grid.css
和 css/flex.css
的基本内容:
grid.css
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.grid-item {
background-color: #ccc;
padding: 20px;
text-align: center;
}
flex.css
.flex-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.flex-item {
background-color: #ccc;
padding: 20px;
text-align: center;
flex: 1 1 30%;
}
这两个CSS文件分别定义了Grid和Flex布局的基本样式,通过在HTML中引入这些样式文件,可以实现相应的布局效果。