CSS Flex排版：为什么垂直居中这么难？
winter
该思维导图由 AI 生成，仅供参考
你好，我是 winter。今天我们来谈谈 Flex 排版。
我们在前面多次讲过，正常流排版的设计来源于数百年来出版行业的排版经验，而 HTML 诞生之初，也确实是作为一种“超文本”存在的。
但是，自上世纪 90 年代以来，Web 标准和各种 Web 应用蓬勃发展，网页的功能逐渐从“文本信息”向着“软件功能”过渡，这个思路的变化导致了：CSS 的正常流逐渐不满足人民群众的需求了。
这是因为文字排版的思路是“改变文字和盒的相对位置，把它放进特定的版面中”，而软件界面的思路则是“改变盒的大小，使得它们的结构保持固定”。
因此，在早年的 CSS 中，“使盒按照外部尺寸变化”的能力非常弱。在我入行前端的时间（大约 2006 年），CSS 三大经典问题：垂直居中问题，两列等高问题，自适应宽问题。这是在其它 UI 系统中最为基本的问题，而到了 CSS 中，却变成了困扰工程师的三座大山。
机智的前端开发者们，曾经创造了各种黑科技来解决问题，包括著名的 table 布局、负 margin、float 与 clear 等等。在这种情况下，Flex 布局被随着 CSS3 一起提出（最初叫 box 布局），可以说是解决了大问题。
React Native 则更为大胆地使用了纯粹的 Flex 排版，不再支持正常流，最终也很好地支持了大量的应用界面布局，这一点也证明了 Flex 排版的潜力。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
CSS Flex排版：为什么垂直居中这么难？ 本文介绍了CSS Flex排版的设计、原理和应用。Flex排版的核心是display:flex和flex属性，它们配合使用。文章详细解释了Flex的设计思路和实现原理，包括主轴、交叉轴、分行、计算主轴和交叉轴等步骤。此外，文章还提供了几个例子，解决了旧时代的CSS三大经典问题，包括垂直居中、两列等高和自适应宽。Flex排版的灵活性和强大功能使其成为解决排版难题的利器。文章内容深入浅出，适合前端开发者快速了解Flex排版的基本原理和应用技巧。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《重学前端》，新⼈⾸单¥59
《重学前端》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(14)
- 最新
- 精选
靠人品去赢flex是我刚开始做小程序，学到的第一个东西，真的好用，结合一些别的属性能解决很多兼容问题，而不再出现一机一况的情况，但是有的的时候，在做安卓和苹果的时候还是会遇到兼容性问题，能不能讲一下安卓和苹果的一些不同，比如在一个安卓上正常，在苹果上会出现边框被吃掉一部分的情况。作者回复: 兼容问题怎么可能有一下子解决的方法呢，我也是case by case去看的啊
2019-06-19211
渴望做梦老师，为何最后一个宽度自适应的例子用 flex: 1 呢，flex: 1 表示什么含义呢？作者回复: 这就是基本的flex用法。
2019-08-0233
KingSwim希望可以图文并茂一些2019-08-14452
许童童flex好用，gird更好用。会讲一下吗？2019-04-13314
阿成https://gist.github.com/aimergenge/e26193440fa38ebbb9a54847540c29c72019-04-15211- Geek_920664分享一个学习flex的小游戏：http://flexboxfroggy.com/2021-10-1210
北拉试过好多次，找了很多方法flex兼容ie9以下，每次都失败，有什么好的解决办法吗2019-04-146
彧豪gird布局如果后面winter老师没有讲到，推荐你找找大漠老师的文章来看看，另外阮一峰老师也写了一篇，二者可以结合起来看看2019-04-135
cjd直接calc(100% - n)2019-04-154
favorlm
自动填充剩余宽度 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>自适应宽</title> <style> .box { position: absolute; width: 300px; height: 100px; background-color: cyan; } .childbox1Attr { position: absolute; background-color: bisque; width: 35px; height: 35px; } .childbox2Attr { position: absolute; background-color: beige; width: 35px; height: 35px; } </style> </head> <body> <div class="box"> <div class="childbox1Attr"></div> <div class="childbox2Attr"></div> </div> <script> const childbox1Attr = { width: '100' }; const childbox2Attr = { width: '100', flex: '1' }; const box = document.getElementsByClassName('box')[0]; const childbox1Ele = document.getElementsByClassName('childbox1Attr')[0]; const childbox2Ele = document.getElementsByClassName('childbox2Attr')[0]; const boxcomputedStyle = window.getComputedStyle(box, null); const child1ComputedStyle = window.getComputedStyle(childbox1Ele, null); childbox1Ele.style.width = childbox1Attr.width+'px'; if(childbox2Attr.flex !== null || childbox2Attr.flex!==''){ if(childbox2Attr.flex === '1'){ // 利用一下不安全特性，实在不知道怎么写 const childbox2EleWidth = boxcomputedStyle["width"].substring(0,3) - child1ComputedStyle["width"].substring(0,3); childbox2Ele.style.width = childbox2EleWidth + 'px'; childbox2Ele.style.left = child1ComputedStyle["width"] } } </script> </body> </html>2019-04-143
收起评论