この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:2
ページ更新者:T
更新日時:2018-02-03 13:16:40

タイトル: 「display: flex」を用いて要素を横並びにする方法

floatやらinline-blockやらで要素を横並びにする方法がいくつかあるが、flexを用いると非常に簡単に実装できるのでメモしておく。

HTML

<div class="flex">

<div>要素１</div>

<div>要素２</div>

<div>要素３</div>

</div>

 

CSS

.flex{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}

 

CSS（中央寄せ）

.flex{
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    height: 200px;
}