Flexboxレイアウト – 横並び1行レイアウト

HTML

<div class="wrap">
  <div class="item">
    <img src="picture01.jpg" alt="パソコンを前に談笑している写真">
    <h2>横並び見出し</h2>
    <p>横並びレイアウトをFlexboxで実装します。</p>
  </div>
  … (繰り返し)
</div>

CSS

.wrap {
  display: flex;
  justify-content: space-between;
}

.item {
  padding: 30px;
  width: 32%;
  background-color: #d6d6d6;
  border-radius: 10px;
}