今回は"フレックスボックス"の実装をしていきます。flex」を用いたレイアウトになります。flexの紹介1.完成イメージとデモ完成イメージデモCodePen2.サンプルコード(HTML・CSS)まずはHTMLを書いてみましょう。長いので、以下のコードを利用しましょう。CodePen.全体を「box」というクラス名を付けた大きなdivで囲って、画像1つ1つを「box-item」というクラス名を付けたdivで囲っています。flexを当てて、その子要素class=“box-item”を整列させます。フレックスボックスにはdisplay以外にも複数のプロパティを追加ことで整列順序や配置の基準位置を指定することができます。今回は、以下2つを指定しています。14px;}スマホ用のCSSはシンプルです。横幅を可変にするためにwidthを%指定に変更します。以上でデモの実装は完成になります。flexは、複数のCSSプロパティと合わせることで様々なレイアウトを表現できます。今回は主なプロパティを紹介していきます。flex-wrap子要素を1行に配置するか複数行に配置できるようにするか指定します。nowrap(初期値):折り返しさせず1行に配置wrap:複数行で上から下に配置wrap-reverse:複数行で下から上に配置flex-direction子要素の表示方向を指定します。:右から左に配置column:上から下に配置column-reverse:下から上に配置justify-content水平方向の配置位置を指定します。flex-start(初期値):左揃えflex-end:右揃えcenter:中央揃えspace-between:均等割り付けspace-around:両端に子要素の半分の間隔をあけて均等割り付けalign-items垂直方向の配置位置を指定します。stretch(初期値):親要素の高さ、またはコンテンツの一番多い子要素の高さに合わせて広げて配置flex-start:上揃えflex-end:下揃えcenter:中央揃えbaseline:ベースラインに揃えるフレックスボックスは、他にも順序が指定できたり様々なレイアウトが実装できます。