阅读量:0
CSS弹性布局（Flexbox）是一种现代的布局方式，它可以让页面元素在容器内自动调整大小和排列，从而实现响应式设计。以下是实现响应式设计的步骤：
- 创建一个HTML文件，添加基本的结构。例如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flexbox Responsive Design</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <div class="item item-1">Item 1</div> <div class="item item-2">Item 2</div> <div class="item item-3">Item 3</div> <div class="item item-4">Item 4</div> <div class="item item-5">Item 5</div> </div> </body> </html> - 创建一个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时，弹性布局会变成一个垂直排列的单列布局。你可以根据需要添加更多的媒体查询，以适应不同的屏幕尺寸和设备。
