为了帮助理解flex-grow概念，以及如何通过使用各种HTML元素来构建弹性布局，巩固所学知识，我们将会对一组被figure元素包裹的图片和图释做响应式布局。这是一个仅用几行代码实现的理想flexbox布局，它的形式在互联网上比较少见，但却是传统报纸和杂志里随处可见的布局。构成它的HTML标签没有什么特别的。

如果我们什么都不做，那么figcaption元素默认在图片下面显示，但是我们可以让它更好看些。在大屏设备上，我们首先将figure元素的display属性设置为flex，将其设置为弹性容器。它的默认值是row和nowrap，我们无需定义默认值。

@media (min-width: 48rem) { 
.figure--horizontal { 
display : flex; } 
}

这组图片和图注现在已经变成了弹性元素，按照默认的主轴排列分布。到目前为止看起来还不错，由于图片元素在源代码里是第一个，所以它在浏览器中会显示在左侧，因为flex-direction的默认值是row，而figcaption元素会作为第二个，显在右侧。

我想让图片的宽度是图释部分的四倍，所以我们给图片添加flex-grow，值为4，而给图释部分设置值为1。

@media (min-width: 48rem) { 

.figure--horizontal img { 
flex : 4;} 

.figure--horizontal figcaption { 
flex : 1; } 
}

让图片和图释按照主轴方向排列，并且按特定比例扩展或者缩放自身宽度，形成一个良好的布局，这比起传统的浮动要简单得多。

如果我们想做一点点变化，改变图片和图释的展示顺序，该怎么办？无需改变HTML源代码，只需要改变flex-direction的默认值，即把row改为row-reverse。

@media (min-width: 48rem) { 
.figure--horizontal-reverse { 
flex-direction : row-reverse; } 
}

无需改变HTML源代码，就能改变元素展示顺序。