flexboxを使ったレイアウト
2017年2月15日
omura
どうも、はじめまして。新人デザイナーのオオムラです。
アクセルに入社して2.5か月くらいになります。
未経験で入社して、毎日知らない単語と知らない世界に圧倒されています。
僕なんかの些細な発見でブログなんか書いていいものなのか…と思ってましたが、文章を書くのは嫌いではないのでとりあえず書いてみます。
先日、会社で使っているパソコンのお気に入りに何やらクリップした覚えのない「FlexBoxを使ったレイアウト」なる記事がありました。
FlexBox、、、単語は知っているぞ。でもちゃんとは知らないぞ。なんや気になるな。ってことでGoogle大先生に聞いてみました。
おっと、なんやねんこれ、めっちゃ便利やん。お家へ帰ってお勉強だ！
FlexBoxとは
ご存じの方も多いでしょうが、、、
簡単にレイアウトが組めるスーパーボックスです。
親要素FlexConteinerと子要素FlexItemで構成します。
早速実践
グロナビを作ってみます。
親要素にdisplay:flex;を指定するだけ。
おお、めちゃ簡単！
See the Pen ygGmJo by shinji omura (@dr25) on CodePen.
右寄せだって～
See the Pen RKvvqg by shinji omura (@dr25) on CodePen.
justify-content: flex-end;で簡単！
等間隔なら
See the Pen XpOOQW by shinji omura (@dr25) on CodePen.
justify-content: space-between;にお任せあれ。
よくあるパターンのロゴは左、ナビは右のレイアウトでさえも
See the Pen ygZwLd by shinji omura (@dr25) on CodePen.
li:first-child {
margin-right: auto;
}
こいつを指定してあげれば、、、、
うわ～、、、すげー、チョー簡単！
めちゃくちゃ便利、そして楽しい
本当に便利です。そんでもってめちゃくちゃ楽しいですね。
まだまだ学ばないことも多くありそうですが、コーディングが捗りそうです！
webは面白い！
毎日悪戦苦闘しまくっている僕ですが、いろんなことができるようになってきて毎日楽しさ増幅中でございます。
webは移り変わりの激しい世界ですからね、日々勉強、そして勉強、さらに勉強、、もっともっと勉強です。
また更新します～！オオムラでした。