小编use*_*106的帖子

.container {
  background: gray;
  width: 600px;
  display: flex;
  flex-flow: row wrap;
  position: relative;
}
.item {
  background: blue;
  width: auto;
  height: auto;
  margin: 4px;
  flex: 1;
  flex-basis: 20%;
}

<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
  <div class="item">E</div>
  <div class="item">F</div>
  <div class="item">G</div>
</div>

.box {
  position: relative;
  display: block;
  width: 600px;
  padding: 24px;
  margin-bottom: 24px;
  border: 2px solid red;
}
.img {
  float: left;
}
.text {
  font-size: 14px;
}

<div class="box">
  <div class="img" style="background-image: url('https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg');"></div>
  <div class="text">This box is one line.</div>
</div>

<div class="box">
  <div class="img" style="background-image: url('https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg');"></div>
  <div class="text">This box has two lines. This box has two lines. This box has two lines. This box has two lines. This box has two …