Media Object

Media Object というレイアウト手法を用いると、メディア クエリを使用せずに、画面スペースに応じて異なるレイアウトを行うコンポーネントを作成することができる。たとえば、モバイルでは積み重ね、デスクトップでは 2列になるように表示する。これは、数行の CSS で実現できる。

以下の CSS で定義したフレックスイテムの 「flex: 1 1 250px;」は、幅の基本サイズが「flex-basis: 250px」に設定されている 。250 pxのアイテムを 2 つ入れるスペースがない場合、それらは折り返される。それらは「flex-grow: 1; flex-shrink: 1;」に設定され伸張することができるため、ラップされると伸張してラインを埋める。

<div class="media">
  <div class="picture"><img src="images/elephant.jpg" alt="elephant"></div>
  <div class="content">
    <p>Media Object という … で実現できる。
    </p>      
  </div>
</div>

.media {
  display: flex;
  flex-wrap: wrap;
  border: 5px solid rgb(149, 170, 191);
  border-radius: 5px;
  margin-bottom: 2em;
}
.media > * {
  flex: 1 1 250px;
  margin: 10px;
}