【CSS】display flexでコンテンツを自在にレイアウト！基本的な使い方をご紹介！

WEBサイトをレイアウトする手法として少し前からよく使われているのがCSS Flexbox。

私も少し前からよく使っていて、個人的にも便利で助かっています。

今回はこのFlexboxについて、基本的な使い方をご紹介していきたいと思います。

親要素にdisplay:flex;プロパティを追加する

まずは、以下のようにhtmlを書きていきます。

<ul>
  <li>テキストテキスト</li>
  <li>テキストテキスト</li>
  <li>テキストテキスト</li>
</ul>

上記のままだと、以下のように縦並びのリストが表示されます。

• テキストテキスト
• テキストテキスト
• テキストテキスト

では、このリストにFlexboxを使って横並びにしてみましょう。

<ul style="display: flex;">
  <li>テキストテキスト</li>
  <li>テキストテキスト</li>
  <li>テキストテキスト</li>
</ul>

ulタグに「display: flex;」プロパティを追加します。

• テキストテキスト
• テキストテキスト
• テキストテキスト

これで、テキストが横並びになったかと思います。

Flexboxの仕組み

Flexboxは、レイアウトを組みたい要素の親要素に対して適応する事で、様々レイアウトを実現してくれます。

特によく使うプロパティと値をご紹介していきます。

display:flex;	親要素に適応させる事でフレックスコンテナになります
flex-directrion	子要素の並びを指定できます 値が「row」なら横並びになります。値が「column」なら縦に要素が並びます
flex-wrap	子要素がコンテナ幅いっぱいに並んだ時に折り返しにするかを指定できます 値が「wrap」なら折り返します。値が「no-wrap」なら折り返しません。
flex-flow	flex-directrionとflex-wrapの値をひとまとめにできるプロパティになります。 値を「low wrap」にすると、子要素は横並びで折り返して表示されます。
justify-content	要素の並び方を指定できます。 値が[space-between]なら幅いっぱいに広がって等間隔に並びます 値が[space-around]なら幅の中央を基準に等間隔に並びます 値が[center]なら幅の中央を基準に並びます 値が[flex-start]なら左から順番に子要素が並びます 値が[flex-end]なら右から順番に子要素が並びます

Flexboxを使ったレイアウトの実例をご紹介

実際に上記のプロパティを参考にしながら、コンテンツをレイアウトしみてみましょう。

横並びで幅いっぱいに子要素を広げる場合

要素を横並びにして幅いっぱいに等間隔に広げるレイアウトを組んでみます。

上記のコンテンツのCSSは以下のようになっています。

.flex_content{
  display: flex;
  flex-flow: low wrap;
}

.flex_content li{
  background: orange;
  width: 200px;
  height: 200px;
  margin-bottom: 20px;
}

.jc-sb{
  justify-content: space-between;
}

横並びで幅の中央を基準に子要素を広げる場合

要素を横並びにして幅の中央を基準に子要素を広げるレイアウトを組んでみます。

上記のコンテンツのCSSは以下のようになっています。

.flex_content{
  display: flex;
  flex-flow: low wrap;
}

.flex_content li{
  background: orange;
  width: 200px;
  height: 200px;
  margin-bottom: 20px;
}

.jc-sa{
  justify-content: space-around;
}

横並びにして左から順番に子要素を並べる場合

要素を横並びにして左から順番に子要素を並べるレイアウトを組んでみます。

上記のコンテンツのCSSは以下のようになっています。

.flex_content{
  display: flex;
  flex-flow: low wrap;
}

.flex_content.jc-fs li{
  background: orange;
  width: 200px;
  height: 200px;
  margin-right: 20px;
  margin-bottom: 20px;
}

.jc-fs{
  justify-content: flex-start;
}

横並びにして右から順番に子要素を並べる場合

要素を横並びにして左から順番に子要素を並べるレイアウトを組んでみます。

上記のコンテンツのCSSは以下のようになっています。

.flex_content{
  display: flex;
  flex-flow: low wrap;
}

.flex_content.jc-fe li{
  background: orange;
  width: 200px;
  height: 200px;
  margin-left: 20px;
  margin-bottom: 20px;
}

.jc-fe{
  justify-content: flex-end;
}

子要素を縦並びにして並べる場合

これまではFlexboxの子要素を横に並べてレイアウトを表示させてきました。

ここでは、要素を縦並びにして子要素を並べるレイアウトを組んでみます。

上記のコンテンツのCSSは以下のようになっています。

.flex_content_c{
  display: flex;
  flex-flow: column wrap;
}

.flex_content_c li{
  background: orange;
  width: 200px;
  height: 200px;
}

その他にこんなプロパティもあります

これまでは、Flexboxを使った代表的なレイアウト手法をご紹介してきました。

この他に、少し変わった並べ方もご紹介いたします。

横並び要素を、右から順に逆並びにレイアウトを組みます

これまではFlexboxの要素が左から横並びに表示されてきたかと思いますが、右から逆に並べる事も簡単に行えます。

• 1
• 2
• 3

上記のコンテンツのCSSは以下のようになっています。

.flex_content_r{
  display: flex;
  flex-flow: row-reverse wrap;
}

.flex_content_r li{
  background: orange;
  width: 200px;
  height: 200px;
}

縦並び要素を、下から順に逆並びにレイアウトを組みます

今度は、要素を下から順番に、縦並びに表示したいと思います。

• 1
• 2
• 3

上記のコンテンツのCSSは以下のようになっています。

.flex_content_c-r{
  display: flex;
  flex-flow: row-reverse wrap;
}

.flex_content_c-r li{
  background: orange;
  width: 200px;
  height: 200px;
  margin-bottom: 20px;
}

いかがでしょうか？

Flexboxには今回ご紹介しているプロパティ以外にも様々なプロパティが用意されており、Webクリエイターボックスさんのサイトで詳しくご紹介しているので、気になる方は確認してみて下さい。

日本語対応！CSS Flexboxのチートシートを作ったので配布します

まとめ

Flexboxについて使い方をご紹介いたしましたが、いかがだったでしょうか？

Webサイトのレイアウト手法は様々な手法が生まれていますが、Flexboxは使えると、レイアウトがとても便利に使えますので、是非チャレンジしてみて下さい！