frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

display:flexでよく使う8つのプロパティ

スポンサードリンク


スポンサードリンク


display flexはとても便利ですが、プロパティが多く、単語も長いので覚えずらいプロパティかなと思います。

そんな覚えたての方に向けてよく使うと思われるプロパティに絞って下記に例を挙げました。



通常

  • display:flex

折り返しあり

  • display:flex
  • flex-wrap: wrap

両端に合わせて均等間隔に配置

  • display:flex
  • justify-content: space-between

終端に寄せる

  • display:flex
  • justify-content: flex-end

中央に寄せる

  • display:flex
  • justify-content: center

逆にする

  • display:flex
  • flex-direction: column-reverse

1
2
3

順番を変える

  • display:flex
  • order: 1

1
2
3

高さを中央にする

  • display:flex
  • align-items: center

See the Pen OgjYJq by funclur (@funclur) on CodePen.

レスポンシブデザインでは、順序を変えるorderやcolumn-reverseも重宝します。