好酒沉瓮底，有耐心看到下面的才会看到重点喔哈哈！flex 应该是 Flexbox 里头最重要的属性了，而 flex 其实是由三个属性组合而成，依照先后顺序分别是「flex-grow」、「flex-shrink」和「flex-basis」，如果 flex 只填了一个数值 ( 无单位 )，那麽预设就是以 flex-grow 的方式呈现，至于三个属性的解释如下：

flex-grow：数字，无单位，当子元素的 flex-basis 长度「小」于它自己在父元素分配到的长度，按照数字做相对应的「伸展」比例分配，预设值为 1，设为 0 的话不会进行弹性变化，不可为负值。

flex-shrink：数字，无单位，当子元素的 flex-basis 长度「大」于它自己在父元素分配到的长度，按照数字做相对应的「压缩」比例分配，预设值为 1，设为 0 的话不会进行弹性变化，不可为负值。

flex-basis：子元素的基本大小，作为父元素的大小比较基准，预设值为 0，也因为预设值为 0，所以没有设定此属性的时候，会以直接採用 flex-grow 属性，flex-basis 也可以设为 auto，如果设为 auto，就表示子元素以自己的基本大小为单位。。

三个属性可以分开设定，也可以合在一起用一个 flex 统一设定，下面的例子展现出同一个 Flexbox，在不同的宽度，子元素会有不同大小的呈现。

HTML代码：

CSS代码：

如果用动画来表现，可以看出拉长的时候红色会变得比蓝色长，但压缩的时候却是蓝色变得比红色长，如此一来就更能体会 flex 在响应式设计里头的关键脚色萝！

以上就是 Flexbox 的完整介绍，想不到一个 CSS3 的属性，可以花费这麽大一篇来介绍，不过也因为有了这个新的属性，让在做 layout 的佈局又更加弹性。

文章来源：

posted @