Flexboxレイアウトの解説
従来のレイアウト手法は、display属性＋position属性＋float属性に依存しています。特殊なレイアウトの場合、非常に不便です。CSSによるレイアウトはウェブサイト制作の基本スキルであるため、あらゆる手法を正しく理解しておく必要があります。この記事では、flexboxの基本知識はもちろん、よく使う設定の意味や使い方なども解説しています。これを読めば、flexboxの活用方法を掴めることでしょう。
1、flexboxの構造・基本知識
CSS flexboxは、コンテナ（親要素）とアイテム（子要素）によって構成されています。コンテナの中に、さまざまなアイテムが入っているイメージです。flexbox使用時はHTMLファイルにコンテナ（container）を作成し、そのコンテナ内にアイテム（item）を作成します。
flexboxの基本的な使い方は単純で、CSSファイルで親となるコンテナに「display: flex」を指定するだけです。この一行で、対象の要素がflexboxとなりました。レイアウトの細かいところを調整する際は通常のCSSと同様、コンテナとアイテムにプロパティを指定していきます。
１.1、flexboxについて
まずは、flexboxの概要や基本知識などを紹介します。flexbox を使えば、JavaScriptや他のCSSプロパティを使うようなレイアウトもこれだけで設計でき、とても便利です。
flexboxとは、webサイトなどの装飾を行うCSSにおいて、短く柔軟なコードで配置を行うためのレイアウトモードのことです。CSS3から追加された比較的新しい機能であるためIE9以前など古いバージョンのブラウザには対応していませんが、現行のものであれば2019年時点ではほとんどのブラウザに対応しています。
その点、flexboxのコードはシンプルで、CSSのみで要素内の配置や表示順序を変えることができます。また、要素間の幅の指定はもちろん、要素内の分量が異なる場合でも高さや幅を調整可能です。要素間の余白設定も簡単なので、より少ない時間でレイアウトを整えられます。
1.２、Flexboxに関する用語
ここからは、flexboxに関する用語を解説します。flexboxを構成する要素であり、あとで紹介するプロパティの指定対象となるコンテナやアイテムなどについても、ここでしっかり取り上げています。実行するときには、プロパティの解説と併せて参考にするとより効果的です。
Axis (軸)
flexboxのレイアウトは主軸 （main axis）と交差軸 （cross axis）によって決まります。flexアイテムを基準として、それに平行な軸が主軸です。一方、交差軸は主軸に垂直に交わる軸です。主軸はflex-directionプロパティの位置から決まり、さらにflex-directionプロパティの値を設定できるなど、flex-directionプロパティと密接な関係を持っています。主軸となる軸は、この設定値によって異なります。row系統の値を設定した際は、主軸はインライン要素の並ぶ方向に伸びる横軸、交差軸は列に沿った縦軸です。一方、主軸にcolumn系統の値を設定すると、columnの縦並び設定に従います。つまり、ブロック要素の並ぶ方向に伸びる軸が主軸、行の方向に延びる横軸が交差軸となるのです。
Direction (方向)
flexコンテナの両端となるmain start/main endとcross start/cross endは、Flexアイテムの流れの始点と終端を表します。
flexboxのプロパティは大きく分けて2種類、flexコンテナ用とflexアイテム用です。まずは、flexコンテナに適用するプロパティを解説します。flexコンテナに適用するプロパティはコンテナ内の全アイテムに適用されるため、これを使いこなせると作業効率が大きく上がります。
2、Flexコンテナ（Flex Container）
コンテナとは、横並びにする要素を1つのグループとしてまとめたものです。flexboxに限らず、CSSでは重要な概念となります。flexboxでも基本的な考え方は変わらず、flexアイテムを含んだ親要素として全体の要となる存在です。flexboxレイアウトを使用する際は、このflexコンテナに「display: flex」を記述します。このdisplayプロパティの指定方法は2つあり「flex」または「inline-flex」です。「display: inline-flex」と設定すると、flexアイテムに幅を指定しなくても自動的にアイテム数に依存した幅が設定されます。
1.flex-direction
2.flex-wrap
3.flex-flow
4.justify-content
5.align-items
6.align-content
2.1、flex-direction属性
主軸の方向や向き (通常または逆方向) を定義することにより、フレックスコンテナー内でフレックスアイテムを配置する方法を設定します。文字などのレイアウトだけでなく、flexアイテムを単位として全体的に方向が変わります。
値は4種類あり、デフォルトの値はrowです。これは左端から右へ横並びさせる、一般的な横書きドキュメント形式となります。
値の内訳は横並びさせるrowと縦並びさせるcolumn、そして起点を反対方向にするreverseの有無によるものです。
row-reverseなら、横並びの起点が右端となり、左へと進んでいく状態になります。
columnは縦書きの日本語のように、上から下へ縦並びさせるものです。
column-reverseになると、縦並びの中でも下から上へと伸びていく独特なものになります。
記述時は「flex-direction: row;」などのように書きます。
1.flex-direction: row;
2.flex-direction: row-reverse;
3.flex-direction: column;
4.flex-direction: column-reverse;
実装効果
コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FlexBox</title>
</head>
<style>
#container{
display: flex;
width: 600px;
height: 280px;
background-color: bisque;
margin-top: 50px;
}
#container{
flex-direction: row;
/* flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse; */
}
.item{
margin: 10px;
padding: 20px;
color: #fff;
}
</style>
<body>
<div id="container">
<div class="item" style="background-color: green;">1</div>
<div class="item" style="background-color: orange;">2</div>
<div class="item" style="background-color: blue;">3</div>
</div>
</body>
</html>2.2、flex-wrap属性
フレックスアイテムを単一行に押し込むか、あるいは複数行に折り返してもよいかを指定します。折り返しを許可する場合は、行を積み重ねる方向の制御も可能です。
折り返さずにflexアイテムを1行に収めるnowrapがデフォルト値として設定されています。flex-wrapプロパティの値は、コンテナの幅に収まらない場合に単純に折り返しを行うwrapと、逆方向に折り返すwrap-reverseを合わせた3種類です。「flex-wrap: wrap;」などのように記述して利用します。
1.flex- wrap: nowrap;
2.flex- wrap: wrap;
3.flex- wrap: wrap-reverse;
実装効果
コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FlexBox</title>
</head>
<style>
#container{
display: flex;
width: 600px;
height: 280px;
background-color: bisque;
margin-top: 50px;
}
#container{
flex-wrap: nowrap;
/* flex-wrap: wrap;
flex-wrap: wrap-reverse; */
}
.item{
margin: 10px;
padding: 50px;
color: #fff;
}
</style>
<body>
<div id="container">
<div class="item" style="background-color: red;">1</div>
<div class="item" style="background-color: blue;">2</div>
<div class="item" style="background-color: orange;">3</div>
<div class="item" style="background-color: green;">4</div>
<div class="item" style="background-color: gray;">5</div>
<div class="item" style="background-color: purple;">6</div>
</div>
</body>
</html>2.3、flex-flow属性
配置方向を変更するflex-directionプロパティと、折り返しの有無や方向を指定するflex-wrapプロパティを一括指定できる、便利なショートハンドプロパティです。
「flex-flow: row wrap;」などのように、まずflex-directionプロパティを設定し、半角スペースを入力したうえで続けてflex-wrapプロパティを設定します。デフォルト値は「row nowrap」です。
「flex-flow: wrap;」などのように、いずれかの値を省略することも可能です。その場合は初期値としてみなされます。どの言語においても、コーディングでは長いコードより少ない行数で同じ機能をシンプルにまとめているコードが好まれます。
複数のプロパティをまとめておけば修正時も記述箇所がわかりやすいので、ショートハンドプロパティは積極的に利用してみましょう。
2.4、justify-content属性
主軸（main axis）方向の揃え方を定めるプロパティです。主軸に対するflexアイテムのレイアウトを定義します。
「justify-content: flex-start;」のように記述し、デフォルトは「flex-start 」です。
flex-startは始端揃え、flex-endは終端揃えで、余白があれば反対側にまとめられます。
centerは中央揃えで、バランスよくまとめることが可能です。
space-betweenやspace-aroundを使うと、余白が均等になるよう自動で配置します。
space-betweenでは、まず両端のアイテムをコンテナの端に揃えたうえで全アイテムを均等に配置します。一方、space-aroundでは、両端のアイテムを含めて均等に配置することが可能です。
コンテナ内のアイテム数が少ないときなど、やや中央に寄せつつ均等に配置したい場合はspace-aroundを使うのが良いでしょう。
1.justify-content: flex-start;
2.justify-content: flex-end;
3.justify-content: center;
4.justify-content: space-between;
5.justify-content: space-around;
6.justify-content: space-evenly;
実装効果
コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FlexBox</title>
</head>
<style>
#container{
display: flex;
width: 600px;
height: 280px;
background-color: bisque;
margin-top: 50px;
}
#container{
justify-content: flex-start;
/* justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly; */
}
.item{
margin: 10px;
padding: 50px;
color: #fff;
}
</style>
<body>
<div id="container">
<div class="item" style="background-color: red;">1</div>
<div class="item" style="background-color: blue;">2</div>
<div class="item" style="background-color: orange;">3</div>
</div>
</body>
</html>2.5、align-items属性
CSS の align-items プロパティは、すべての直接の子要素に集合として align-self の値を設定します。フレックスボックスでは交差軸方向のアイテムの配置を制御します。グリッドレイアウトでは、グリッド領域におけるアイテムのブロック軸方向の配置を制御します。
1. align-items: flex-start;
2. align-items: flex-end;
3. align-items: center;
4. align-items: baseline;
5. align-items: stretch;
実装効果
コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FlexBox</title>
</head>
<style>
#container{
display: flex;
width: 600px;
height: 280px;
background-color: bisque;
margin-top: 50px;
}
#container{
align-items: flex-start;
/* align-items: flex-end;
align-items: center;
align-items: baseline;
align-items: stretch; */
}
.item{
margin: 10px;
padding: 50px;
color: #fff;
}
</style>
<body>
<div id="container">
<div class="item" style="background-color: red;">1</div>
<div class="item" style="background-color: blue;">2</div>
<div class="item" style="background-color: orange;">3</div>
</div>
</body>
</html>2.6、align-content属性
フレックスボックスの交差軸またはグリッドのブロック軸方向の内部のアイテムの間または周囲の空間の配分方法を設定します。そのため、flex-wrapプロパティの値がwrapまたはwrap-reverseである場合のみ有効となります。
「align-content: stretch;」のように記述し、高さ（幅）を拡張して余白を埋めるように配置するstretchがデフォルト値です。
flex-startは始端揃え、flex-endは終端揃えで、たとえばflex-startの場合はアイテム全体が上に寄ったような配置となります。
align-contentプロパティの値やその考え方は、justify-contentプロパティとほぼ同様です。中央揃えのcenterはもちろん、両端揃えかつ均等に配置するspace-betweenや、両端を含めて余白を均等にして配置するspace-aroundも使えます。
1. align-content: flex-start;
2. align-content: flex-end;
3. align-content: center;
4. align-content: space-between;
5. align-content: space-around;
6. align-content: stretch;
実装効果
コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FlexBox</title>
</head>
<style>
#container{
display: flex;
width: 600px;
height: 450px;
background-color: bisque;
margin-top: 50px;
flex-wrap: wrap;
}
#container{
align-content: flex-start;
/* align-content: flex-end;
align-content: center;
align-content: space-between;
align-content: space-around;
align-content: stretch; */
}
.item{
margin: 10px;
padding: 50px;
color: #fff;
}
</style>
<body>
<div id="container">
<div class="item" style="background-color: red;">1</div>
<div class="item" style="background-color: blue;">2</div>
<div class="item" style="background-color: orange;">3</div>
<div class="item" style="background-color: green;">4</div>
<div class="item" style="background-color: gray;">5</div>
<div class="item" style="background-color: purple;">6</div>
</div>
</body>
</html>
3、Flexアイテム（Flex Item）
flexアイテムは、flexコンテナの直下に組み込まれた子要素です。flexコンテナに指定したプロパティは、配置順や並べる行の数としてflexコンテナ全体に反映されます。一方、flexアイテムに指定したプロパティは、並び順や伸び縮み率など、そのflexアイテムだけが対象です。flexコンテナとflexアイテムのプロパティを使い分けることで、統一性を持たせながらもアイテム一つひとつに独自の特徴を与えることができます。また、flexコンテナ内で直下に続くテキストもflexアイテムの一種です。
1. flex-grow
2. flex-shrink
3. align-self
4. order
5. flex-basis
3.1、flex-grow属性
flexコンテナ内に余白がある場合、flex-growプロパティを設定することで、flexアイテムの大きさなどに関わる伸長係数を自動で指定できます。
デフォルト値は0で、負の値は無効です。すべてが0のデフォルト時のように、同じ値を指定するとすべてのflexアイテムは同じサイズになります。いずれかの値を大きくすると、対象のアイテムが大きくなり、ほかのアイテムは残りのスペースを均等に割ったサイズとなります。全体のバランスを崩さずに特定のアイテムだけを大きくしたいときに便利です。「flex-grow:1;」のように記述して利用します。
1. flex-grow: 0 | initial | n
実装効果
コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FlexBox</title>
</head>
<style>
#container{
display: flex;
width: 600px;
height: 280px;
background-color: bisque;
margin-top: 50px;
}
.item{
margin: 10px;
padding: 50px;
color: #fff;
}
.item1{
/*他のitemの値は0です。*/
flex-grow: 1;
}
</style>
<body>
<div id="container">
<div class="item item1" style="background-color: red;">1</div>
<div class="item" style="background-color: blue;">2</div>
<div class="item" style="background-color: orange;">3</div>
</div>
</body>
</html>3.2、flex-shrink属性
flex-growプロパティと対をなす、アイテムの縮小係数の比率を設定できるプロパティです。flexアイテム全体の幅が flexコンテナの主軸幅より大きい場合に、縮小率を数値で指定できます。
flex-growプロパティとは反対に、値を設定したアイテムのみ小さくなり、値の大きさに反比例して小さくなります。こちらのデフォルト値は1で、flex-growプロパティと同様に負の値は無効です。0を指定した場合はオリジナルサイズを保ちます。「flex-shrink:1;」のように記述して利用します。
1. flex-shrink: 1 | initial | 0 | n
実装効果
コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FlexBox</title>
</head>
<style>
#container{
display: flex;
width: 600px;
height: 400px;
background-color: bisque;
margin-top: 50px;
flex-direction: row;
flex-wrap: nowrap;
align-content: flex-start;
}
.item{
width: 300px;
height: 300px;
/* 縮小しない*/
flex-shrink: 0;
color: #fff;
}
.item1{
flex-shrink: 1;
}
.item2{
flex-shrink: 0;
}
.item3{
flex-shrink: 3;
}
/* containerの横幅は600px、三つのアイテムの横幅は900pxで、300pxを超えています。
比率として縮小すると、 300/4 = 75
item1 縮小すると 75*1 = 75, 残りの幅サイズは225
item1 縮小しない
item1 縮小すると 75*3 = 225, 残りの幅サイズは75
*/
</style>
<body>
<div id="container">
<div class="item item1" style="background-color: red;">1</div>
<div class="item item2" style="background-color: blue;">2</div>
<div class="item item3" style="background-color: orange;">3</div>
</div>
</body>
</html>3.3、align-self属性
flexアイテムの垂直方向の位置を決めるプロパティです。コンテナに余白がない場合は指定値が無視されます。
デフォルト値は、親要素であるalign-itemsプロパティの値を適用するautoです。align-itemsプロパティと同様にflex-startは上揃え、flex-endは下揃え、centerは中央揃えで配置します。
ベースラインに準じて配置するbaseline、上下の余白を埋めて配置するstretchも変わりません。「align-self: stretch;」のように記述して利用します。
1. align-self: auto;
2. align- self: flex-start;
3. align- self: flex-end;
4. align- self: center;
5. align- self: stretch;
6. align- self: baseline;
実装効果
コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FlexBox</title>
</head>
<style>
#container{
display: flex;
width: 600px;
height: 400px;
background-color: bisque;
margin-top: 50px;
flex-direction: row;
flex-wrap: nowrap;
}
#container{
/*containerの扱い方を「flex-start」で指定する*/
align-items: flex-start;
}
.item{
width: 300px;
height: 300px;
color: #fff;
}
.item3{
/*item3の設定はcontainerの設定より優先される*/
align-self: flex-end;
}
</style>
<body>
<div id="container">
<div class="item item1" style="background-color: red;">1</div>
<div class="item item2" style="background-color: blue;">2</div>
<div class="item item3" style="background-color: orange;">3</div>
</div>
</body>
</html>3.4、order属性
flexコンテナ内のFlexアイテムの並び順を指定するプロパティです。通常flexアイテムはHTMLの記述に従って配置されますが、orderプロパティを使えばHTMLでの並び順を変えずに並び順だけを変更できるため改修時にも役立ちます。
デフォルト値は0で、数字が小さい順に並ぶほか、負の値も指定可能です。ほかのアイテムの設定値を変えない状態で、位置を変えたいアイテムのみ-1などのように設定すると、対象アイテムを簡単に先頭に持って行くことができます。「order: 3;」のように記述して利用します。
実装効果
コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FlexBox</title>
</head>
<style>
#container{
display: flex;
width: 600px;
height: 400px;
background-color: bisque;
margin-top: 50px;
}
.item{
width: 300px;
height: 300px;
color: #fff;
order: 0;
}
.item1{
order: 3;
}
</style>
<body>
<div id="container">
<div class="item item1" style="background-color: red;">1</div>
<div class="item item2" style="background-color: blue;">2</div>
<div class="item item3" style="background-color: orange;">3</div>
</div>
</body>
</html>
3.5、flex-basis属性
flexアイテムの基準となる初期幅（main size）を設定するプロパティです。「px」や「em」など、単位付きの数値やFlexコンテナのmain sizeに対するパーセンテージを細かく指定することができます。
デフォルト値は、自身のwidthまたはheightプロパティを参照する「auto」です。contentと設定すると、幅をコンテンツの横幅から自動でサイズ設定することもできます。
親要素のサイズやflex-growプロパティなどが指定されている場合は自動的に調整されます。widthやheightプロパティのようなサイズ固定方法ではないため注意してください。「flex-basis:50%;」のように記述して利用します。
1. flex-basis: <length> | auto /* default auto*/
実装効果
コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FlexBox</title>
</head>
<style>
#container{
display: flex;
width: 600px;
height: 400px;
background-color: bisque;
margin-top: 50px;
}
.item{
width: 300px;
height: 300px;
color: #fff;
}
.item{
flex-basis: 20%;
/* flex-basis: auto; */
}
</style>
<body>
<div id="container">
<div class="item item1" style="background-color: red;">1</div>
<div class="item item2" style="background-color: blue;">2</div>
<div class="item item3" style="background-color: orange;">3</div>
</div>
</body>
</html>ここで、FlexBoxの基本知識と実行表現を解説しました。ウェブサイトを作成する場合はご参考にできればと思います。
エンジニアファーストの会社
株式会社CRECO
嬋