Pocket

コンテンツの高さが可変の要素を高さを揃えて並べる

ECサイトのコーディングをやっているとよく商品の写真のサイズがバラバラで要素の高さが変わってしまうことがあります。これを揃えるのに、 display: flex;を使うのはよく聞きます。ちょっとサンプルを下に。

読み込むCSSのサンプルはこちら。

これを表示すると以下のように表示されます。

flexでコンテンツを高さを揃えて横並び

高さを揃えたい要素の親要素に display: flex;を設定してあげればOK。ベンダプレフィックスつきも古いブラウザ対応のために念のため設定しておきます。

要素内のコンテンツを上下に分けたい

何がやりたいかというと以下のようなことをやりたい。

CSSでコンテンツを上下にわける

商品画像の下に商品名やボタンを配置したいのだけれど、商品画像のサイズが小さかったり大きかったりと可変なのでバランスが悪くなります。商品名やボタンのコンテンツは下つきで。画像のコンテンツは上つきで表示したい。そこでここでもまた display: flex;を活用します。

上・下のコンテンツの親(li要素)のCSSにflexの設定を行います。

  • 12行目 – flexボックスの設定
  • 13行目 – flex-directionでコンテンツの配置を横から縦に設定
  • 14行目 – justify-contentでコンテンツを端から均等割付

これを表示すると…

CSSでコンテンツの上下つけ完成

できた!\(^o^)/
これなら上のコンテンツが可変でも下のコンテンツが可変でも問題なくできそう。

flexを使用する時点でIE10以下は見捨てました。