Flexbox 典型用例

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

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

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

Some things that you might want to try in this live example relate to the different ways you might want to constrain the media object in your design.

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

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

You could also give each side different flex-grow factors, for example setting the side with the image to flex: 1 and the content side to flex: 3. This will mean they use a flex-basis of auto but distribute that space at different rates according to the flex-grow factor you have assigned. The flex properties we use to do this are described in detail in the guide Controlling ratios of flex items along the main axis.