先用Flexbox构建弹性布局，再通过Media Query在不同屏幕尺寸下调整样式。例如，桌面端导航横向排列，移动端改为垂直排列并全宽显示；中等屏幕允许换行并居中对齐，每项约占30%宽度；小屏幕上可隐藏侧边栏，调整内容显示顺序。通过断点控制flex-direction、flex-wrap、order等属性，实现响应式设计。
在 CSS 中，Flexbox 和 Media Query 结合使用可以创建响应式布局，让页面在不同屏幕尺寸下都能良好展示。基本思路是：先用 Flexbox 构建灵活的布局结构，再通过 Media Query 在特定断点调整 flex 属性、方向、换行、对齐方式等。
1. 使用 Flex 布局构建基础结构
先用 Flex 让容器内的子元素灵活排列。例如，一个导航栏在桌面端横向排列：
.container { display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap;}.nav-item { padding: 10px;}
2. 用 Media Query 调整移动端布局
当屏幕变小时，可以改变主轴方向、允许换行、调整对齐方式等。比如在手机上让导航垂直排列：
@media (max-width: 768px) { .container { flex-direction: column; align-items: flex-start; } .nav-item { width: 100%; text-align: left; border-bottom: 1px solid #ddd; }}
3. 根据断点控制换行与对齐
在中等屏幕上，可以让项目换行显示，并居中对齐：
PHP5 和 MySQL 圣经
本书是全面讲述PHP与MySQL的经典之作，书中不但全面介绍了两种技术的核心特性，还讲解了如何高效地结合这两种技术构建健壮的数据驱动的应用程序。本书涵盖了两种技术新版本中出现的最新特性，书中大量实际的示例和深入的分析均来自于作者在这方面多年的专业经验，可用于解决开发者在实际中所面临的各种挑战。
466 查看详情
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 1024px) { .container { flex-wrap: wrap; justify-content: center; } .item { flex: 0 1 30%; /* 每项占大约 30% 宽度 */ margin: 5px; }}
4. 隐藏或重排元素
某些设备上可以隐藏不重要内容，或通过 order 属性调整显示顺序：
@media (max-width: 480px) { .sidebar { display: none; } .main-content { order: 1; width: 100%; } .header-title { order: -1; margin-bottom: 10px; }}
基本上就这些。关键是先用 Flex 实现弹性布局，再用 Media Query 针对不同设备“微调”行为。这种组合简单高效，适合大多数响应式设计场景。
以上就是在css中如何用flex与media query结合的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1023484.html
微信扫一扫 
支付宝扫一扫 
