自从开始开学习 CSS 布局，想要比较灵活的把父元素的空间分配给各个子元一直是各个前端程序员的梦想。

在 flex 之前，如果不是专门去搜索相关的解决方案，一般人几乎想不出非常灵活的三（多）栏等高布局方案，而即使看了解决方案，很多人也会大呼奇技淫巧。

不得不感慨在 flex 之前 CSS 的布局功能之弱：基本只能使用一些并非为布局而设计的属性来实现想要的布局——float、inline-block、position、甚至是 table 等。而使用这些属性来实现各种布局效果，往往又会遇到相当多另外的坑：比如浮动的闭合、inline-block 的垂直对齐、position 的定位原点以及 table 的不够灵活等。

直到出现了 flex

flex 可以说是一次性解决了前端布局的所有的问题（当然，并没有完全解决，要不然也不会有 grid layout 了），以前很难实现的布局效果在 flex 下简直不能更简单，以至于一些其它平台也开始吸纳 flex 的布局思想，也有些开源项目把 flex 的布局方式移植到其它平台。

中文社区也有不少写 flex 的文章，比如 ruanyifeng。然而个人觉得不少写 flex 的文章都有个通病，就是一上来就整一堆 flex 相关的术语，比如 flex container，flex item，main axis（主轴），cors axis（交叉轴），不禁让人望而生畏，都还没搞清楚怎么回事，就来一堆术语。

然而这还不是最大的问题，最大的问题是很多文章并没有把 flex 布局的详细计算方式讲清楚，尤其是连 ruanyifeng 的文章也没把这事说清楚，但是在 Google 搜索 flex 相关的文章，他的文章却会出现在第一页。因为我觉得他写的并不好，所以就不贴地址了，想看的同学可以自己搜一下，就在第一页。

即使是 MDN 以及《The Book Of CSS3》里也没把 flex-grow 和 flex-shrink 的计算方式说清楚。

所以我决定写这一篇文章，把 flex-grow 与 flex-shrink 的详细计算方式讲清楚。

flex 如何解决传统常见布局问题

在传统布局中最常见也是急需的当然就是在从左往右把父元素的空间分配给子元素以实现多栏布局了：按比例也好，定宽也好，更灵活的定宽加占用剩余空间也好。

那我们就从使用 flex 如何实现三栏布局开始吧。

想要实现三栏等高布局，且两边的侧栏宽度固定而中间一栏占用剩余的空间，如下代码就足够了：

<style>
  section {display: flex;}
  .left-side,
  .right-side {width: 200px;}
  .content {flex-grow: 1;}