メディアオブジェクトはブログのコメントやツイート,ライクなど繰り返しの多いコンポーネントを構築する際のドキュメントだ。レイアウトはフレックスボックスを使用する。<div class="media">を柔軟な箱（flexible box）としてレイアウトすることを決定し作業を進めることにする。 まず、要素の親要素をフレックスコンテナにするため display の特別な値を設定する。次にフレックスコンテナ内のフレックスアイテムを<div class="asset">と<div class="content"> に決めた。

/* html */
<div class="media">
  <div class="asset"><img src="images/xxx.jpg" alt=""></div>
  <div class="content"></div>
</div>

/* css */
.media {
  display: flex;
  flex-wrap: wrap;
  background: #f7f7f7;
}

モバイルでは積み重ね、デスクトップでは 2列になるように以下を設定する。フレックスコンテナの直接の子要素に対しflex: を設定する。

flex: [flex-grow] [flex-shrink] [flex-basis];(一括指定)

flex-grow と flex-shrink プロパティがともに 1 に設定されているとき、フレックスアイテムは初期の flex-basis から伸長したり縮小したりできる。

.media > * {
  flex: 1 1 250px;
  margin: 10px;
}

Using Media Queries For Responsive Design In 2018 より引用