FlexBoxの基本的な使い方

css
ボタンなどのレイアウトを横並びにさせる方法で以前でしたらfloatの方がよく使われていたと思うのですが、最近ではfloatの代わりにflexboxを使っているところも大分増えてきましたよね。

レイアウトの幅を自在に変えたり、右寄せしたりと比較的floatよりも簡単に扱える印象もあります。ただ古いIEには対応していなかったりと多少の懸念材料はあるものの、将来的にはflexboxのほうが主流になるのではないかと思います。

今回はそんなflexboxの基本的な使い方をソースコードを使って紹介していきます。

[スポンサーリンク]

ボタンを単純な横並びにする。

こちらはHTMLソースです。

<nav>
  <ul class="nav">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
  </ul>
</nav>

こちらがCSSソースです。

ul {
  list-style:none;
}
.nav {
  display: flex;
}
.nav a {
  margin: 20px;
  border-radius: 20px;
  background: #53BBD3;
  color: #ffffff;
  display: block;
  padding: 30px;
  text-decoration: none;
}

See the Pen flexbox-basic by morinkey (@morinkey) on CodePen.

さいごに

今回紹介した内容はFlexBoxの本当基本的な部分のみを紹介しました。

FlexBoxではfloatと使うと苦労していたことも比較的簡単に表現できます。例えばpinterest風なボックスの表示もわりと簡単に表現できますし、右寄せ・左寄せも自由自在に扱えます。もう少し複雑なボックスの配置方法も当ブログでいつか扱えれればなぁと思いますのでご期待を!

それでは!