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

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

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

HTML

<div class="flex">

<div>要素1</div>

<div>要素2</div>

<div>要素3</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;
}