メディアカード

サムネイル幅のみ指定した場合

画像とタイトル・本文抜粋などのテキスト類を横並びにするレイアウトは「メディアカード」と呼ばれている。基本的にサムネイル画像エリアに何らかのサイズ指定（%、pxなど）をしておき、テキストエリアは残りの幅いっぱいまで成り行きで配置したいというケースが多い。
flexboxレイアウトではdisplay:flexとするだけでボックスを横並びにするので便利だが、各アイテムの縮小率を指定するflex-shrinkの初期値が1（縮小する）になっているため、同じ行内に幅が指定されていない長文テキストがある場合、画像が押し込まれて縮小してしまう。どの程度押し込まれるかは隣接するアイテム内のテキスト量によって変動するので、ガタガタの表示になってしまう。

.media {
　display: flex;
　align-items: center;
　padding: 20px 0;
　border-bottom: 1px solid #e7e7e7;
　color: inherit;
　text-decoration: none;
　transition: color .3s;
}
.media__thumb {
　position: relative;
　transition: .3s;
　width: 30%;  /* サムネイル画像の幅のみ指定 */
　margin-right: 20px;
}
.media__body {
　font-size: 14px;
}

サムネイル幅のガタツキ防止例①

サイズ指定したいサムネイル側のボックスに、flex-shrink:0を付けておく。flex-shrink:0が設定されれば、指定した幅以下になることはないので、一番お手軽な対処法である。
ただし、これだけではテキストボックス側のサイズはコンテナ幅いっぱいまで広がる状態にはなっていない（特にテキストボックス側に背景色やborderが付くようなデザインであった場合は大いに問題が生じてしまう）。

.media__thumb {  /* サムネイル画像にflex-shrink:0を付ける */
　position: relative;
　transition: .3s;
　width: 30%;
　margin-right: 20px;
　flex-shrink: 0;
}

サムネイル幅のガタツキ防止例②

テキストボックス側の幅もきちんとコンテナ端まで伸ばすようにするためには、やはり全てのアイテムにwidthまたはflex-basisで幅を指定するのが確実。全てのアイテムに正しく幅が指定されていれば、flex-shrinkの値は初期値のままでも問題は生じない。
ただし、同じメディアカードのコンポーネントであっても

  • サムネイルがあるものとないものが存在する
  • サムネイルがない場合は自動的にテキストボックスが全幅で表示される

という仕様にしたい場合はテキストボックス側にあらかじめ幅を指定しておくわけにはいかない。

.media__thumb {
　position: relative;
　transition: .3s;
　width: 30%;
　margin-right: 20px;
　/* flex-shrink: 0;  無くても構わない*/
}
.media__body {
　width: calc(70% - 20px);
　font-size: 14px;
}

サムネイル幅のガタツキ防止例③

サムネイルエリアの取り外しが可能なメディアカードとして組む場合は、

  • サムネイルエリアにflex-shrink:0＋幅指定
  • テキストエリアにflex-grow:1

という設定にしておくのがおすすめ。flex-grow:1としておけばテキストエリアのボックスは常にコンテナの残りの余白を全て埋めるように引き伸ばされて表示されるため、サムネイルエリアが存在すれば70%、サムネイルエリアが存在しなければ100%で表示されるようになる。

.media__thumb {
　position: relative;
　transition: .3s;
　width: 30%;
　margin-right: 20px;
　flex-shrink: 0;
}
.media__body {
　flex-grow: 1;
　font-size: 14px;
}
inserted by FC2 system