公開:2018年05月14日（最終更新:2018年05月15日）
floatの代わりになると期待されているflexbox。その効果はかなり大きいものですでに多くのサイトで導入されています。
非常に使い勝手が良い分、少しでも間違えるとまったく意図しない形になってしまいます。
どうもうまくflexを使えないよーという人の為に、flexの使い方を優しく紹介します。
Flexboxとは、要素のサイズが不明なものでも、ダイナミックに変化に柔軟に対応できるCSS3の新しいレイアウトモジュールです。レスポンシブデザインなど、これからはウィンドウサイズによってホームページの表示を正確に変化させていく必要があります。floatではどうしてもタグが長くなってしまうところをflexだったら数行で解決出来る優れものです。
ぜひ、使い方をマスターして自分のサイトでも生かしていきましょう！
flexを導入して大きくデザインが崩れてしまうのは、flexを置く場所が間違っていることが大半です。floatの場合は移動させたい要素（div等)にfloatを配置すればOKでした。しかし、flexの場合、少し勝手が変わっていきます。
flexを指定したい親枠（大枠）がブロック要素であればdisplay: flex;と指定。インライン要素であればdisplay: inline-flex;と指定します。
|
1 2 3 |
ブロック要素 <address>、<blockquote>、<center>、<div>、<dl>、<fieldset>、<form>、<h1>-<h6>、 <hr>、<noframes>、<noscript>、<ol>、<p>、<pre>、<table>、<ul> |
|
1 2 3 4 |
インライン要素 <a>、<abbr>、<acronym>、<b>、<basefont>、<bdo>、<big>、<br>、<cite>、<code>、<dfn>、 <em>、<font>、<i>、<img>、<input>、<kbd>、<label>、<q>、<s>、<samp>、<select>、 <small>、<span>、<strike>、<strong>、<sub>、<sup>、<textarea>、<tt>、<u>、<var> |
簡単に言えば、タグを使うと『改行』されるものがブロック要素。見出しタグなどですね。インライン要素はタグを使用しても改行されません。太文字タグやリンクタグなどがここに分類されます。
flex-direction … 子要素の並ぶ向き
デフォルト値: row
|
1 2 3 4 5 6 7 8 9 10 11 |
/* 最初から順番に横並び */ flex-direction: row; /* 最後から順番に横並び */ flex-direction: row-reverse; /* 最初から順番に縦並び */ flex-direction: column; /* 最後から順番に縦並び */ flex-direction: column-reverse; |
flex-wrap … 子要素の折り返し
デフォルト値: nowrap
|
1 2 3 4 5 6 7 8 |
/* 折り返しなし1行で表示 */ flex-wrap: nowrap; /* 折り返しあり複数で表示 */ flex-wrap: wrap; /* 逆から折り返して表示 */ flex-wrap: wrap-reverse; |
flex-flowを使えば、flex-directionとflex-wrapを同時に指定できる。
デフォルト値: row nowrap
|
1 2 |
/* 両方指定例 */ flex-flow: row wrap; |
justify-content … 水平方向の揃え
デフォルト値: flex-start;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/* 行の開始位置から配置。左揃え */ justify-content: flex-start; /* 行末から配置。右揃え */ justify-content: flex-end; /* 中央揃え */ justify-content: center; /* 最初と最後の子要素を両端に配置し、残りの要素は均等に間隔をあけて配置 */ justify-content: space-between; /* 両端の子要素も含め、均等に間隔をあけて配置 */ justify-content: space-around; |
align-items … 垂直方向の揃え
デフォルト値: stretch
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/* 高さ一杯に表示 */ align-items: stretch; /* 親要素の開始位置から配置。上揃え */ align-items: flex-start; /* 親要素の終点から配置。下揃え。 */ align-items: flex-end; /* 中央揃え。 */ align-items: center; /* ベースラインで揃える */ align-items: baseline; |
align-content … 複数行にした時の揃え
デフォルト値: stretch
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/* 親要素の高さに合わせて広げて配置 */ align-content: stretch; /* 親要素の開始位置から配置。上揃え。 */ align-content: flex-start; /* 親要素の終点から配置。下揃え。 */ align-content: flex-end; /* 中央揃え */ align-content: center; /* 最初と最後の子要素を上下の端に配置し、残りの要素は均等に間隔をあけて配置 */ align-content: space-between; /* 上下端にある子要素も含め、均等に間隔をあけて配置 */ align-content: space-around; |
以上が親枠に設定できるオプションになります。
display: flex;が指定された要素の中にある要素（Flexアイテム）にだけ効果が発揮されます。親要素に display: flex; が指定されていないと動作しません。
デフォルトで問題がなければ、設定する必要はありません。
order … 番号をつけて配置順番を変更する。
flex-grow … デフォルトは１。それより大きくすると他の枠よりも大きい枠になる。
flex-shrink … 上とは反対にこちらは大きくすると縮む。デフォルトは１。
flex-basis … 子要素のベースとなる幅の指定。px,%,autoが使用可能。デフォルトはauto。
flex … flex-grow、flex-shrink、flex-basisをまとめて指定できる。
align-self … 子要素の垂直方向の揃え
デフォルト値: auto
高さが足りない子要素の配置場所を決める。背景を出したい、文字の位置を揃えたいなどの問題を解決します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/* 親要素の高さ、もしくは子要素の最大の高さに合わせて配置。背景がでない */ align-self: stretch; /* 親要素の開始位置から配置。上揃え。高さが足りない子要素の下に背景が出る */ align-self: flex-start; /* 親要素の終点から配置。下揃え。高さが足りない子要素の上に背景が出る */ align-self: flex-end; /* 中央揃え 高さが足りない子要素の上下に背景が出る */ align-self: center; /* ベースラインで揃える */ align-self: baseline; |
以上が子要素に配置できるオプションになります。
設定をずらっと見ていくとわかるようにfloatと違って、flexは個別に指定するのではなく、親枠でflexを宣言し、子要素をどのように配置するのかを設定します。floatに慣れていると1つずつ設定が出来ないので戸惑うこともあるかもしれませんが、flexは親枠を指定して子要素の横幅を指定するだけで出来るので慣れると非常に楽に感じるはずです。
これからはflexboxが主流になっていくと思いますので、使ったことがない人はぜひお試し下さい。
レスポンシブ対応の高機能スライダー「Swiper」
SASS/SCSSを便利に使う『koala』の紹介
画像を横にスライドさせる「jQuery Slider2」
パンダアップデート
【PHP】CSVファイルからデータを抜き出し出力させる
DNSがなかなか切り替わらない
ホームページを誰でも簡単に作れるようになるために、最初に覚えることは枠組みの作り方。どんなに素晴らしいデザインのイメージが頭の中にあってもそれを表現出来なければ意味がありません。デザインを作る上でどうしても避けて通れない...続きを読む
2020/09/10
2020/09/09
2020/08/31
2020/08/25
2020/08/24
こんなお悩みをお持ちではありませんか？
弊社はホームページの悩みをすべて解決します！
ご相談は下記からお気軽にご連絡ください！
