117笔记问答CSS弹性布局（Flexbox）是一种现代的布局方式，它可以让页面元素在容器内自动调整大小和排列，从而实现响应式设计。以下是实现响应式设计的步骤：
- 创建一个HTML文件，添加基本的结构。例如：
Flexbox Responsive Design
Item 1
Item 2
Item 3
Item 4
Item 5
- 创建一个CSS文件（例如
styles.css），并设置基本样式和弹性布局容器。例如：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
background-color: #f1f1f1;
padding: 20px;
margin: 10px;
text-align: center;
font-size: 30px;
cursor: pointer;
}
- 使用媒体查询（Media Queries）为不同屏幕尺寸设置不同的样式。例如，当屏幕宽度小于或等于768px时，可以调整项目之间的间距和对齐方式。
@media (max-width: 768px) {
.container {
flex-direction: column;
}
.item {
width: 100%;
margin-bottom: 20px;
}
}
这样，当屏幕宽度小于或等于768px时，弹性布局会变成一个垂直排列的单列布局。你可以根据需要添加更多的媒体查询，以适应不同的屏幕尺寸和设备。