Flexbox优于float和inline-block：因float触发BFC需清除且导致高度塌陷，inline-block受空白符影响易换行；Flexbox天然无视空白、默认水平排列、语义清晰无副作用。
为什么用 display: flex 而不是 float 或 inline-block
因为 float 会触发 BFC、需要清除浮动，inline-block 会把 HTML 换行符当空格（约 4px），导致两栏总宽超容器而意外换行。Flexbox 天然无视空白字符，子元素默认水平排列，语义清晰且无副作用。
常见错误现象：明明写了 width: 50%，但右侧栏掉到下一行；或者小屏时内容被裁切、出现横向滚动条。
-
flex容器不依赖内容宽度计算，避免四舍五入误差引发的错位 - 必须设置
box-sizing: border-box，否则padding和border会撑出容器 - 不要在 flex 子项上同时写
width和flex，容易冲突
flex: 0 0 30% 和 flex: 1 的区别在哪
前者是「固定比例列宽」，后者是「剩余空间等分」。简历类双栏（如左侧 30% 放联系信息、右侧 70% 放经历）适合用 flex: 0 0 30%；而通用内容区（如博客主文+侧边栏）更推荐 flex: 1 + max-width 组合。
性能影响很小，但可维护性差别大：flex: 1 在响应式断点中自动缩放，width: 30% 在某些视口下可能因边框叠加导致溢出。
立即学习“前端免费学习笔记（深入）”；
-
flex: 0 0 30%表示：不放大、不缩小、基准宽为 30% -
flex: 1等价于flex: 1 1 0，会按比例瓜分剩余空间 - 若需限制最大宽度（如桌面端侧边栏不超过 320px），写成
flex: 0 0 30%; max-width: 320px;
如何让双栏在手机上变成单栏
不能只改子项 width，必须配合 flex-wrap: wrap，否则即使设了 width: 100%，Flex 默认 nowrap 也会强行挤在同一行，造成内容溢出或字体缩放异常。
典型错误是媒体查询里写 display: none——这会让整个栏消失，而不是堆叠。
- 桌面端：父容器设
display: flex，子项设flex: 0 0 30%和flex: 0 0 70% - 移动端：父容器加
flex-wrap: wrap，子项改width: 95%（留边防滚动条） - 别忘了
min-width: 0，防止长单词或 URL 撑破 flex 项
视频区域并排时为什么新内容不见了
因为用了 position: absolute，它让元素脱离文档流。后续的 <h1>new part</h1> 会从父容器顶部开始渲染，直接盖在首页内容上，而不是自然顺延。
这不是 Flex 的问题，而是布局思路错了。Flex 双栏本身保留在文档流中，新增区块会自动出现在它下方。
- 正确结构：外层
<div class="overall-container"> 设 <code>display: flex - 左右两个
<div> 是兄弟节点，不是父子嵌套 <li>视频容器放在右栏内部，不额外定位，靠 Flex 自身对齐控制</li> 实际开发中最容易被忽略的一点：没给 flex 子项设 <code>min-width: 0。遇到长 URL 或未断行的英文段落时，它会强行撑宽整栏，破坏双栏结构——这点在移动端尤其明显。
