この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:7
ページ更新者:guest
更新日時:2026-05-18 07:36:53

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

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

HTML

要素１

要素２

要素３

 

CSS

.flex{
    display: -webkit-flex;
    display: flex;
}

 

CSS（中央寄せ）

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

align-items: center;を用いると、縦方向での中央寄せが実現できる。