横並びに便利なdisplay:flexについて紹介します。

TOP
コラム
横並びに便利なdisplay:fle

HTMLは記述した内容が左詰めで、順番に縦に並んでいきます。
それらをCSSによってさまざまなレイアウトに変更するのですが、HTML、CSS初心者の方は、要素を横並びにしたいけどうまくできない、という問題でつまずきがちです。
以前は要素を横並びにするためには、floatがよく利用されていました。
しかしfloatはレイアウトが崩れやすく、初心者の方がfloatで横並びを制御することは、初心者の方にとっては難易度が高いです。
そこでオススメするのが当記事で紹介するdisplay flexです。
flexを使えば、要素の横並びを簡単に実現でき、なおかつレスポンシブ対応も簡単にできます。
以下、CSSにおけるflexについて解説していきます。

display:flexとは

そもそもCSSのdisplayプロパティとは、要素の表示形式を決めるものです。
display:blockや、display:noneのように使用します。
flexはdisplayプロパティに指定する表示形式のひとつで、flexを指定することにより、flexboxというレイアウトモード使用できます。
flexを簡単に説明するなら、「親要素に対して子要素を横並びにする」機能です。

親要素、子要素とは

理解している方は読み飛ばしていただいてかまいません。
わかりやすい例ですと、


<ul>
   <li>子要素1</li>
   <li>子要素2</li>
   <li>子要素3</li>
</ul>

<ul>が親要素、入れ子になっている<li>が子要素です。
もうひとつ例を見てみます。


<div class="X">

    <div class="A">
      <p>A</p>
    </div>

    <div class="B">
      <p>B</p>
    </div>

    <div class="C">
      <p>C</p>
    </div>

</div>

親要素Xに対して、子要素はA、B、Cです。
また、A、B、Cの中の<p>はそれぞれの子要素です。
入れ子構造になっている要素の、外側の部分のタグが親要素だと思っていただいて構いません。

flexを指定する場所

上で解説した親要素に対して、display:flexをかけます。
上の例ですと

.X{
display:flex;
}
となります。

flexを指定された要素の子は「flexアイテム」となります。

単に親要素にflexを指定しただけでは、子要素は左詰めで横並びになります。
ここから親要素や子要素にプロパティを追加し、レイアウト変更を行っていきます。

親要素に指定できるプロパティ

親要素に指定できるプロパティを一部紹介します。

flex-direction

親要素に対して子要素の配置方向を指定するプロパティです。

flex-direction:row;

flexはデフォルトではrowとなっており、HTMLの順番通り左から配置されます。

flex-direction:row-reverse;

rowが左から順に配置されるとしたら、row-reverseは右から順に配置されます。

flex-direction:column

フレックスアイテムを上から下に縦並びにします。
flexで横並びにしたものを、また縦並びにすることになるので、あまり使用頻度は多くありません。

flex-direction:column-reverse

columnとは逆に下から上に立て並びにします。

flex-wrap

アイテムの折り返しを指定するプロパティです。
折り返しとは、横並びにした際、要素の幅を超えそうであれば、収まりきらないアイテムが下に回り込むことです。レスポンシブデザインでは必須と言えます。

flex-wrap:no-wrap;

デフォルトではこの値となっており、アイテムを折り返さず一列に配置します。

flex-wrap:wrap;

アイテムを折り返し配置します。
基本的にはこれを使います。

flex-wrap:wrap-reverse;

アイテムを折り返し、下から上に並べます。
これはあまり使うことはありません。

flex-flow

flex-directionとflex-wrapをまとめて指定するプロパティです。
flex-flow:row wrap;
のように記述します。

justify-content

アイテムの横方向の位置を指定するプロパティです。
デフォルトでは左揃えで配置でしたが、右揃え、中央揃えなど、横軸の位置を決定します。

justify-content:flex-end;

右揃え
[　　〇〇〇]

justify-content:center;

中央揃え
[ 　〇〇〇　]

justify-content:space-between;

要素に対して、両端のアイテムを余白を空けず配置し、他のアイテムを等間隔に配置します。
[〇〇〇]

justify-content:space-around;

両端のアイテムの余白を空け、均等に配置します。

align-items

justify-contentは水平方向でしたが、align-itemsは垂直方向の位置を指定するプロパティです。
デフォルトではalign-items: stretchとなっており、アイテムの上下の余白を埋めるように配置します。

align-items:flex-start;

アイテムを上揃えに配置します。

align-items:flex-end;

アイテムを下揃えに配置します。

align-items:center;

アイテムを上下中央揃えで配置します。

flexで使えるプロパティは他にもあります。
気になる方は調べてみてください。

子要素に指定できるプロパティ

親要素をflexにした際、子要素にもflexに関係するプロパティを使用できるようになります。
以下、一部を紹介します。

flex-grow

アイテムの伸び率を指定します。
コンテナ内に余白がある場合、アイテムが伸び、余白を埋めてくれます。

flex-shrink

アイテムの縮み率を指定します。
アイテムの幅の合計が、コンテナの幅の合計を超えた際、自動的に縮みます。

flex-basis

コンテナ内のアイテムの基本となる幅を指定します。

flex

上記3つ、アイテムの伸縮率、幅を一括で指定します。
基本的にはflexで一括指定することが多いです。
記入例
flex:1 1 auto;

最後に

以上がdisplay:flexに関する解説なります。
flexでの横並びはfloatと比較して制御は難しくありませんが、自在に使いこなすには慣れが必要です。
簡単な入れ子構造のHTMLを書いてみて、CSSを触り、どのように要素が変化するかを試して、各プロパティの使い方を体で覚えることが習得の近道です。
またブラウザでの要素検証(Webページを開いた状態でF12キー)を使いこなせば、Web制作がとても捗ります。
併せてご利用いただくことで、よりflexボックスへの理解が深まるでしょう。