弹性盒子的典型用例

媒体对象是网页设计中的常见模式：这种模式下，一侧具有图片或其他元素，另一侧具有文本。理想情况下，媒体对象应该可以翻转：即把图片从左侧移动到右侧。

这种模式随处可见，用于评论以及其他需要显示图片和描述的地方。使用弹性盒子，我们可以让媒体对象中包含图片的部分从图片中获取尺寸信息，并对媒体对象的主体进行弹性布局，以占用剩余空间。

在下面的实时示例中，你可以看到我们的媒体对象。使用对齐属性来将交叉轴上的元素对齐到 flex-start，然后为 .content 弹性元素设置为 flex: 1。与上面的列布局卡片模式一样，启用 flex: 1 表示这部分卡片可以延伸。

在这个实例中，你可能想要尝试的一些事情与你想在设计中约束媒体对象的不同方式有关。

为避免图片过大，你应该为图片添加 max-width。由于媒体对象那一侧使用的是弹性盒子的初始值，它可以缩小但不会延伸，且其 flex-basis 值是 auto。应用于图片的任何 width 或 max-width 将会成为 flex-basis。

你也可以允许两侧按比例延伸和缩小。如果将两侧都设置为 flex: 1，它们将从 flex-basis 为 0 开始延伸和缩小，因此最终会得到两个大小相等的列。你可以将内容作为指南，并将其都设置为 flex: auto，这种情况下，它们将从内容的大小或直接应用于弹性元素的任何大小（例如图片的宽度）延伸和缩小。

你还可以为每一侧指定不同的 flex-grow 因子，例如将图像侧设置为 flex: 1，将内容侧设置为 flex: 3。这意味着它们使用 flex-basis 为 0，但根据你分配的 flex-grow 因子以不同的速度分配空间。我们使用的弹性属性在控制弹性元素在主轴上的比例中有详细描述。