【CSS】Flexboxを使ってレスポンシブな「dl dt dd」を作る

年内最後の投稿になる今回は、今までで一番アクセスの多い「レスポンシブな「dl dt dd」を作る」の最新版をご紹介します。

以前の内容では「float: left;」を使って横並びにしていましたが、最新版では「Flexbox」を使います。

◆まずはデモページをご覧ください。

それでは、HTMLとCSSを順に解説していきます。会社概要を例にしています。

HTMLは、シンプルな「dl dt dd」となっています。

CSSでは「dl」に「display: flex;」を指定し、「dt dd」を横並びにしています。

「flex-basis」で「dt dd」それぞれの横幅を指定しています。合わせて100％になるようにするとよいです。

メディアクエリで「dl」に「flex-flow: column;」を指定することで、スマホでは「dt dd」が縦並びになります。

デモページのファイル一式をご希望の方はダウンロードできますので、よろしければどうぞ。