Flexboxで均等割り付けを実現できる「justify-content: space-between」は自動でマージンも計算してくれるため非常に使い勝手が良く、インフォメーションをグリッドレイアウト風に並べる時など、ついつい多用してしまいます。 Box01 Box02 Box03 Box04 上の例のように一行に全て入りきるか「flex-wrap: no-wrap」を指定した時のように、改行されない場合は問題ないのですが、下の例のように二行になった場合、「justify-content: space-be
前回はシンプルな命令で簡単にフレキシブルなレイアウトを実現できるFlexboxの基本的な使い方を説明しました。今回は応用編としてFlexboxを使って、一般的な使い方とは少し違う面白い使い方をご紹介したいと思います。 皆さんがFlexboxを使ったレイアウトと聞いて、真っ先に思い浮かべるのは基本編でも作った横並びメニューやペイン等の分割レイアウトでしょうか？実際にFlexboxはとても使い勝手が良いので、かなり広いシーンで活躍させることができます。 01.Flexboxでアイコンを中央配置させてみる まず最
皆さんは横並びメニューを作るときどんな方法で行っていますか？ 定番のfloat？それともinline-block？ 今回ご紹介するFlexboxは、数行のシンプルな命令で簡単にフレキシブルなレイアウトを実現できる、新しいレイアウト手法です。 それまで、横並び要素の高さ揃えや縦中央配置で苦労していた私には目からウロコものでした！グリッド・レイアウトにも適し、レスポンシブデザインとの親和性が高いのも特徴ですね。 CSS3から追加された新機能なので、ChromeやFirefoxなどのモダンブラウザでは問題なく使え