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

Question

我正在努力提高我的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>

和CSS：

.imgblock {

}

.imgblock .img {
    float:left;
    margin:0 5px 0 0;
}

.imgblock .img-medium {
    margin-right:10px;
}

.imgblock .img img {
    display:block;
}

您可以在此处查看整个代码：http://jsfiddle.net/necolas/rZvEF/

继菲利普沃尔顿之后（你可以查看他的“由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>

和CSS：

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

.media__img {
  margin-right: 1em;
}

.media__body {
  flex: 1;
}

您可以在此处找到完整的代码：https://jsfiddle.net/luc4leone/wqqkwhou/

任何改进代码，或指出我所犯错误或只是评论OOCSS的评论都将不胜感激。