◀ 7.

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

▶
編集
ページの作成
テンプレートを更新

ページの作成

親となるページを選択してください。

ページは必ず何かしらの親ページに紐づきます。
親ページに紐づくページを子ページといいます。
例： 親=スポーツ, 子1=サッカー, 子2=野球

子ページを親ページとして更に子ページを作成することも可能です。
例： 親=サッカー, 子=サッカーのルール

親ページはいつでも変更することが可能なのでとりあえず作ってみましょう！

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

HTML

<div class="flex">

<div>要素１</div>

<div>要素２</div>

<div>要素３</div>

</div>

 

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;を用いると、縦方向での中央寄せが実現できる。

編集
ページの作成
テンプレートを更新

ページの作成

親となるページを選択してください。

ページは必ず何かしらの親ページに紐づきます。
親ページに紐づくページを子ページといいます。
例： 親=スポーツ, 子1=サッカー, 子2=野球

子ページを親ページとして更に子ページを作成することも可能です。
例： 親=サッカー, 子=サッカーのルール

親ページはいつでも変更することが可能なのでとりあえず作ってみましょう！
子ページ
子ページはありません
同階層のページ
  1. 文法、規則
  2. セレクタ
  3. プロパティ
  4. 色の指定方法
  5. アニメーション
  6. ライブラリ
  7. 「display: flex」を用いて要素を横並びにする方法
  8. スクロールの際のサイドバー固定方法「position: sticky」
  9. 縦の中央寄せ
  10. CSSの変更が反映されない
  11. 画面サイズもしくはスマホの場合のCSS切り替え方法
  12. 一行で左、真ん中、右にそれぞれ要素を寄せる方法
  13. 左右の端にそれぞれ要素を寄せる方法
  14. Bootstrapで両サイドを固定して広告を表示させる方法

人気ページ

最近更新/作成されたページ