使用CSS flexbox设置媒体对象的样式

我正在努力提高我的CSS技能。几年前，尼古拉斯·加拉赫（Nicolas Gallagher）设计了一些媒体对象的变体，正如妮可·沙利文（Nicole Sullivan）所解释的那样。以下是他的HTML：

<div class="imgblock cf"> 
    <div class="img img-medium"> 
        <img src="http://placehold.it/50x50" alt=""> 
     </div> 
     <div class="content"> 
        A little bit of content ok content
     </div> 
</div>

您可以在此处检查整个代码：

遵循Philip Walton（你可以查看他的“通过Flexbox网站解决”）作为练习，我对Flexbox也做了同样的练习。HTML：

<div class="media">
  <div class="media__img">
    <img src="http://placehold.it/50x50">
  </div>
  <div class="media__body">
    <p>A little bit of content ok content</p>
  </div>
</div>

您可以在此处找到完整的代码：

---

如果您能对代码进行任何改进，或指出我所犯的错误，或只是对OOCSS进行评论，我们将不胜感激。

很抱歉，我没有发现问题。问题到底是什么？嗨，哈希姆，我想知道你是否认为CSS或HTML可以改进。例如，可以用divs包装img和p标签吗？我认为这些附加元素有助于使媒体对象可重用。Gallegher就是这么做的，但Walton没有。另一个例子是我添加的class.vertical align，用于将第一个媒体对象中的文本居中：我不确定仅仅为一个规则添加一个类是否值得。

<div class="media">
  <div class="media__img">
    <img src="http://placehold.it/50x50">
  </div>
  <div class="media__body">
    <p>A little bit of content ok content</p>
  </div>
</div>

.media {
  display: flex;
  align-items: flex-start;
}

.media__img {
  margin-right: 1em;
}

.media__body {
  flex: 1;
}