解 説

ECサイトなどで見かける商品別のブロックをFlexboxを使って作成するサンプルです。
参考にしたのはこちらのページです。Some Inspiration for Pricing Tables
折角Flexboxを使っているので、少し応用してみました。

サンプル1
3カラムになったブロックの中央がお勧め商品になっています。目立ち効果を上げるためにシェフのお勧めのスタンプを付けています。HTMLのコーディングではお勧め商品を最上段に持ってきてコーディングしていますが、CSSで見た目を変えています。このような場合もFlexboxを使用して、orderプロパティを使うことで簡単に表示位置を変えることができます。

また、ブロックの中の画像も「見だし」→「画像」→「価格」→「説明文」の順番に表示されていますが、HTMLのコーディングでは「見だし」→「価格」→「説明文」→「画像」の順番になっています。これもorderプロパティを使うことで実現しています。

仕掛けとしてマウスが重なったブロックはボーダーの色を変えるようになっています。

HTMLコード

CSSコード

サンプル2
こちらもFlexboxを使って作成したサンプルです。基本的な考え方はサンプル1と同じですが、中央のお勧め商品についてはブロックのサイズを大きくして目立ち効果を上げているのが特徴です。

HTMLコード

CSSコードはサンプル1のCSSに以下を追加します。
CSSコード