解 説

DogRoboの毎日の仕事といえばブロック積みをすること。ブリキ製のロボットにとって単純作業はお手のものだ。けれども、困った案件もある。ブロックを横並びにすることは簡単ではなかった。そのためには、ブロックを浮遊状態にしてから並べる必要があるからだ。
dog_float
デザイナー諸君に聞いてもらいたい。Webの世界の物理の法則に従ったデザインを心がけて欲しい。ブロックを横並びにするとは物理の法則を逸脱した行為なのだから..
そんなことをブツブツ言いながら作業をするのだった。

通常フローのレイアウトを横並びのレイアウトに変更

flex-img
上のような通常フローを下のような横並びのレイアウトに変えるにはflexレイアウトを使うと簡単です。

flex-img1

今回のサンプルとコード

HTMLコード

通常フローレイアウトのCSSコード

横並びレイアウトのCSSコード

display:flexを使用したflexレイアウト作成方法

通常フローしたブロック要素を横並びにするにはこれまでfloatプロパティを使用していましたが、その挙動は難しくて入門者を困らせる関門でした。CSS3で定義されたFlexBoxの仕組みを使うと簡単に横並びのレイアウトが出来上がります。また、今までできなかったこともうまく解決できるようになりました。まずは簡単に横並びのレイアウトを作成してみましょう。

作成手順

  1. flexコンテナにdisplay:flexを記述するだけで横並びレイアウトが出来上がります。それだけでOK!!簡単なのです。
flexレイアウトを使うためには、「flexコンテナ」と「flexアイテム」2つの用語を覚えましょう。
flex-container

  1. flexコンテナとは横並びにするカラムをまとめる親要素
  2. flexアイテムとは横並びにするカラムのこと

あとは、flexコンテナに display : flex; とするだけ。

縦並びと横並びを明示的に指定する方法

全ての始まりはflexコンテナに 「display:flex」と記述することから始まります。
flexを使用して縦並びを明示的に指定するには「flex-direction:column」のプロパティと値を使用します。

横方向のレイアウトはflexコンテナに flex-direction : row;
縦方向のレイアウトはflexコンテナに flex-direction : column;

flex2

Flex Boxレイアウト関連記事