首页弹性盒子Flex布局案例。查找一个应用Flex布局的小案例，实例一个简单的页面布局。应该有一点实际内容，要有视图，框架

弹性盒子Flex布局案例。查找一个应用Flex布局的小案例，实例一个简单的页面布局。应该有一点实际内容，要有视图，框架

时间: 2024-11-29 12:36:24 浏览: 8

弹性盒子（Flexbox）是一种CSS布局模型，它使得开发者能够轻松地创建灵活的、响应式的容器，其中元素可以动态调整空间和对齐方式。下面是一个简单的HTML和CSS Flex布局示例，用于创建一个两列布局的响应式网格： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .container { display: flex; /* 使用Flex布局 */ justify-content: space-between; /* 元素均匀分布，项目间留有间隔 */ padding: 10px; } .column { flex: 1; /* 自动分配剩余空间 */ background-color: #f1f1f1; border: 1px solid #ccc; margin-bottom: 15px; padding: 20px; box-sizing: border-box; } @media (max-width: 768px) { .column { width: 100%; /* 当屏幕宽度小于768px时，变为单列 */ } } </style> </head> <body> <div class="container"> <div class="column" style="background-color: lightblue;">左侧列</div> <div class="column" style="background-color: lightgreen;">右侧列</div> </div> <p>这是一个简单的Flex布局例子，当屏幕宽度大于768px时，显示为左右两列；当屏幕变窄时，自动切换为单列。</p> </body> </html> ``` 在这个例子中，`.container`设置了`display: flex;`使其成为Flex容器。`.column`元素拥有`flex: 1;`，这意味着它们会平均分配剩余的空间。当屏幕尺寸减小到媒体查询的条件时，`.column`的宽度会变成100%，实现了响应式的单列布局。

阅读全文