flexboxで要素の高さを揃えつつ上下中央にする方法（IE10対応）

flexboxを使うと簡単に要素を上下中央に揃えられますが、親要素に背景色や枠線がついていると一手間必要になるので順を追ってサンプルを作成してみました。

実装したいデザイン

まずHTMLから

HTML

<div class="wrap01">
    <div class="col01">
        <p>テキストテキストテキスト</p>
    <!-- /col01 --></div>
    <div class="col01">
        <p>テキストテキスト</p>
    <!-- /col01 --></div>
    <div class="col01">
        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    <!-- /col01 --></div>
<!-- /wrap01 --></div>

上のHTMLをflexboxを使って横並びにします。

CSS

.wrap01 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.col01 {
    padding: 20px;
    width: 320px;
    border: #ccc solid 1px;
    background-color: #ff9900;
}

この時点で下記のレイアウトになります。

これのテキストを上下中央にするためにflexboxのalign-items: center;を使うのですが、これを親要素にそのまま適用すると下記のようになってしまいます。

CSS

.wrap01 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.col01 {
    padding: 20px;
    width: 320px;
    border: #ccc solid 1px;
    background-color: #ff9900;
}

実装したいデザインのようにするためには、親要素ではなく子要素にdisplay: flex;とalign-items: center;を適用させます。

CSS

.wrap01 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.col01 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 20px;
    width: 320px;
    border: #ccc solid 1px;
    background-color: #ff9900;
}

そうすると実装したいデザインのようになります。

flexboxを使うとレスポンシブサイトなどで簡単にレイアウトの変更が出来ると思うので、積極的に使っていきたいですね。