flexbox响应式布局核心是容器设display: flex并配flex-direction、flex-wrap等属性，子项用flex缩放，结合媒体查询按屏幕切换方向与占比，无需浮动或绝对定位。
用Flexbox做HTML响应式布局，核心是让容器“懂尺寸”、子项“会伸缩”、断点“有逻辑”。不需要写一堆浮动或绝对定位，靠几条关键CSS就能让页面在手机、平板、桌面自动适配。
父容器先立规矩：启用Flex并控制流向
把外层盒子设为弹性容器，是所有自适应的基础：
- display: flex 是必须的第一步，子元素立刻变成弹性项目
- flex-direction: row（默认）适合横向导航或卡片横排；小屏时换成 column 让内容垂直堆叠
- flex-wrap: wrap 很关键——它允许子项在空间不够时自动换行，而不是被强行压缩或溢出
- justify-content 管水平对齐（比如 space-between 让首尾贴边、中间等距），align-items 管垂直对齐（比如 center 居中）
子元素自己定尺寸：用flex属性代替固定宽高
别再给每个div写width: 300px或width: 25%了。用flex的三参数组合更灵活：
- flex: 1 表示“拿走所有剩余空间”，常用于等宽卡片或填满区域
- flex: 0 0 200px 表示“不伸也不缩，就保持200px”，适合头像、图标等固定尺寸元素
- flex: 1 1 30% 表示“可伸可缩，初始占30%”，兼顾弹性与基准比例
- 注意：如果设置了padding或margin，要确保它们加起来不超过容器总宽，否则可能触发意外换行
不同屏幕用不同策略：媒体查询配合方向与占比切换
不是所有设备都适合同一套排列方式，断点要服务于内容，不是硬套像素：
- 手机（≤768px）：flex-direction: column，字段上下堆叠，按钮全宽显示
- 平板（769px–1024px）：flex-basis: 48%，每行最多放两个模块，留点间隙不拥挤
- 桌面（≥1025px）：flex-basis: 23% 或 flex: 1 配合多列，充分利用宽度
- 也可以用 gap 统一控制间距，比手动加margin更稳定，尤其在换行时不会错位
表单和导航这类常见结构，直接套用模板就行
比如一个登录表单：
- 小屏：label + input 垂直排列，flex-direction: column
- 大屏：label 和 input 并排，flex-direction: row，label固定宽，input用 flex: 1
- 导航栏同理：手机上变成竖排菜单，桌面恢复横排，只需改一行 flex-direction
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
