定義リストを表のようにするcss（高さを揃えてテキストは縦中央揃え）

定義リスト（dl,dt,dd）を表のような見た目にする

マークアップをしていると、定義リスト（dl,dt,dd）を表にしたいときってありますよね。
今回は定義リストを表のような見た目にし、見出し側dtと内容ddの高さを揃え縦中央揃えにする方法をご紹介したいと思います。

私もサイト作成時に製品やキャンペーンの概要をまとめたりするときによく使います。
一度作成しておくとHTML側もすっきりしてとても便利ですよ😊👍

デモサイトはこちら！サイトの幅を小さくしていっても見出しが縦中央になっていますね！

DEMO

HTML

<div class="wrapper">
    <dl class="define-table">
        <dt class="define-table__title">title</dt>
        <dd class="define-table__desc">
            <ul class="define-table__list">
                <li class="define-table__item">
                    <p>text</p>
                </li>
                <li class="define-table__item">
                    <p>text</p>
                </li>
                <li class="define-table__item">
                    <p>text</p>
                </li>
                <li class="define-table__item">
                    <p>text</p>
                </li>
                <li class="define-table__item">
                    <p>text</p>
                </li>
                <li class="define-table__item">
                    <p>text</p>
                </li>
                <li class="define-table__item">
                    <p>text</p>
                </li>
                <li class="define-table__item">
                    <p>text</p>
                </li>
                <li class="define-table__item">
                    <p>text</p>
                </li>
                <li class="define-table__item">
                    <p>text</p>
                </li>
                <li class="define-table__item">
                    <p>text</p>
                </li>
                <li class="define-table__item">
                    <p>text</p>
                </li>
                <li class="define-table__item">
                    <p>text</p>
                </li>
                <li class="define-table__item">
                    <p>text</p>
                </li>
                <li class="define-table__item">
                    <p>text</p>
                </li>
                <li class="define-table__item">
                    <p>text</p>
                </li>
                <li class="define-table__item">
                    <p>text</p>
                </li>
                <li class="define-table__item">
                    <p>text</p>
                </li>
                <li class="define-table__item">
                    <p>text</p>
                </li>
                <li class="define-table__item">
                    <p>text</p>
                </li>
                <li class="define-table__item">
                    <p>text</p>
                </li>
                <li class="define-table__item">
                    <p>text</p>
                </li>
            </ul>
        </dd>
        <dt class="define-table__title">title</dt>
        <dd class="define-table__desc">
            <ul class="define-table__list">
                <li class="define-table__item">
                    <p>text</p>
                </li>
                <li class="define-table__item">
                    <p>text</p>
                </li>
                <li class="define-table__item">
                    <p>text</p>
                </li>
                <li class="define-table__item">
                    <p>text</p>
                </li>
            </ul>
        </dd>
        <dt class="define-table__title">title</dt>
        <dd class="define-table__desc">
            <ul class="define-table__list">
                <li class="define-table__item">
                    <p>text</p>
                </li>
                <li class="define-table__item">
                    <p>text</p>
                </li>
                <li class="define-table__item">
                    <p>text</p>
                </li>
                <li class="define-table__item">
                    <p>text</p>
                </li>
            </ul>
        </dd>
    </dl>
</div>

CSS

.wrapper{
  display: block;
  margin: 30px auto;
  width: 90%;
}
.define-table{
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  margin-bottom: 45px;
  width: 100%;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-flow: wrap;
}
.define-table__title,
.define-table__desc{
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  padding: 15px 20px;
  border-top: 1px solid #ccc;
  font-size: 14px;
  line-height: 1.6;
  box-sizing: border-box;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.define-table__title{
  width: 120px;
  color: #534a3c;
  font-weight: bold;
  background-color: #f8f8f8;
  border-right: 1px solid #ccc;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.define-table__desc{
  margin-left: 0;
  width: calc(100% - 120px);
  background-color: #fff;
}
.define-table__list{
  letter-spacing: -.4em;
}
.define-table__item{
  display: inline-block;
  margin-right: 12px;
  padding-right: 12px;
  letter-spacing: normal;
}

dl（.define-table）にdisplay: flex;とflex-flow: wrap;を使用して高さを揃えます。
さらに、縦中央揃えにするためにdt（.define-table__title）とdd（.define-table__desc）にdisplay: flex;とalign-items: center;を使用しています。
align-items: center;はdlではなくdtとddに使用してくださいね！！