cssでメニューを横並びにする簡単なやり方

こんにちは。てんとう虫です。
メニューを横並びにする方法はfloatを使う方法等色々ありますが、
display: flex;を使う方法を備忘録的に書きます。

HTMLコード

<ul>
  <li>HOME</li>
  <li>WORK</li>
  <li>COMPANY</li>
  <li>FORM</li>
</ul>

cssコード

.flex{
  display: flex;
}

表示結果

.flexに対して、cssでdisplay:flexを記述するだけです。

簡単です。しかし一点注意！

現在はChrome28、Firefox22、IE11からしか対応していません。

それではまた。