flex布局（3）

三、悬挂式布局

html代码如下：

<div class="box">
  <img src="icon.jpeg" class="box-figure" width="60px" height="60px" />
  <div class="box-body">
    <div>标题</div>
    <p>内容部内容部内容部内容部分内容部内容部内容部内容部内容部内容部内容部</p>
  </div>
</div>

css代码如下：
.box {
width:300px;
height:110px;
padding:20px;
display: flex;
align-items: flex-start;
border:1px #f00 solid;
}
.box-figure {
width:60px;
height:60px;
background:#f00;
margin-right: 1em;
}
.box-body {
flex: 1;
}