【CSS】Flexboxによるレイアウト配置
Flexbox とは
Flexbox は、子要素をどのようにレイアウトするかを決めるための仕組みです。
Flexbox を使用するには、親要素にdisplay: flexを追加します。
デフォルトでは、子要素が左から横並びになります。
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>.parent {
display: flex;
}通常
Flexbox
ここから Flexbox の各プロパティによって、レイアウトの変更を行っていきます。
親要素に対するプロパティ
flex-direction
要素の配置について、どの向きに要素を配置するかを指定します。
デフォルトはrowです。
以降の説明はrowを基準に説明していきます。
この値によって挙動が異なるプロパティがいくつかあります。
.parent {
display: flex;
flex-direction: row;
}| プロパティ値 | 方向 | 開始位置 |
|---|---|---|
row | 水平方向 | 左 |
row-reverse | 水平方向 | 右 |
column | 垂直方向 | 上 |
column-reverse | 垂直方向 | 下 |
row（デフォルト）
row-reverse
column
column-reverse
justify-content
水平方向の配置位置を指定します。デフォルトは、flex-startです。
.parent {
display: flex;
justify-content: flex-start;
}| プロパティ値 | 説明 |
|---|---|
flex-start | 左寄せ |
center | 中央寄せ |
flex-end | 右寄せ |
space-between | 等間隔配置 先頭と末尾は端に配置 |
space-around | 等間隔配置 両端の余白の幅は要素間の余白の幅の半分 |
space-evenly | 等間隔配置 すべての余白の幅が同じ |
flex-start（デフォルト）
center
flex-end
space-between
space-around
space-evenly
実際はflex-directionによって配置方向が異なります。
flex-end (row-reverse)
flex-end (column)
flex-end (column-reverse)
align-items
垂直方向の配置位置を指定します。デフォルトは、stretchです。
.parent {
display: flex;
align-content: stretch;
}| プロパティ値 | 子要素の高さ | 説明 |
|---|---|---|
stretch | 親要素の高さ | 上揃え |
flex-start | 自身の高さ | 上揃え |
center | 自身の高さ | 中央揃え |
flex-end | 自身の高さ | 下揃え |
baseline | 自身の高さ | ベースラインに揃える（文字が水平に並ぶ） |
stretch（デフォルト）
flex-start
center
flex-end
baseline
align-itemsもflex-directionによって配置方向が異なります。
stretch (column)
flex-end (column)
flex-wrap
子要素が親要素の大きさを超えた場合に、折り返すかどうかを指定します。
デフォルトはnowrapです。
flex-directionによって折り返す向きが異なります。
.parent {
display: flex;
flex-wrap: nowrap;
}| プロパティ値 | row, row-reverse | column, column-reverse |
|---|---|---|
nowrap | 折り返さない | 折り返さない |
wrap | 下に折り返す | 右に折り返す |
wrap-reverse | 上に折り返す | 左に折り返す |
nowrap（デフォルト）
wrap
wrap-reverse
align-content
要素の折り返し（flex-wrap）が設定されている場合に、行の配置方法を指定します。
デフォルトはstretchです。
align-itemsは行毎に適用されます。
.parent {
display: flex;
flex-wrap: wrap;
align-content: stretch;
}| プロパティ値 | 行の高さ | 説明 |
|---|---|---|
stretch | 親要素の高さの等分 | 行の高さを均等にする |
flex-start | コンテンツの高さ | 上揃え |
center | コンテンツの高さ | 中央揃え |
flex-end | コンテンツの高さ | 下揃え |
space-between | コンテンツの高さ | 等間隔配置 行頭と行末は端に配置 |
space-around | コンテンツの高さ | 等間隔配置 両端の余白の幅は要素間の余白の幅の半分 |
space-evenly | コンテンツの高さ | 等間隔配置 すべての余白の幅が同じ |
stretch（デフォルト）
flex-start
center
flex-end
space-bwtween
space-around
space-evenly
flex-directionがcolumnまたはcolumn-reverseの場合は、行ではなく列になります。
space-bwtween (column)
place-content
place-contentは、align-contentとjustify-contentを同時に設定します。
.parent {
display: flex;
flex-wrap: wrap;
place-content: space-between center;
}
/* 以下と同義 */
.parent {
display: flex;
flex-wrap: wrap;
align-content: space-between;
justify-content: center;
}gap
子要素の間隔を指定します。
gapは、row-gapとcolumn-gapをまとめた指定方法です。
.parent {
display: flex;
flex-wrap: wrap;
gap: 10px 20px;
}
/* 以下と同義 */
.parent {
display: flex;
flex-wrap: wrap;
row-gap: 10px;
column-gap: 20px;
}子要素に対するプロパティ
order
子要素の並び順を整数で指定します。値の小さいな要素から順に並びます。
<div class="parent">
<div class="child" style="order: 3">1</div>
<div class="child" style="order: 10">2</div>
<div class="child" style="order: -1">3</div>
<div class="child" style="order: 5">4</div>
<div class="child" style="order: 0">5</div>
<div class="child" style="order: 7">6</div>
</div>align-self
align-itemsについて、単独で配置方法を指定します。
指定するプロパティ値はalign-itemsと同じです。
デフォルトはautoとなっており、親のalign-itemsの値を引き継ぎます。
<div class="parent">
<div class="child">1</div>
<div class="child" style="align-self: flex-start">2</div>
<div class="child">3</div>
</div>.parent {
display:flex;
align-items: flex-end;
}flex-grow
親要素の幅が余っている時に、子要素の幅がどのくらい拡張するかを指定します。
デフォルトには0が設定されており、子要素の幅そのものになります。
以下の例だと、1:2:4 の幅になります。
<div class="parent">
<div class="child" style="flex-grow: 1">1</div>
<div class="child" style="flex-grow: 2">2</div>
<div class="child" style="flex-grow: 4">3</div>
</div>flex-shrink
子要素の幅が親要素の幅を超えた場合に、どのくらい縮小するかを指定します。
子要素の幅をwidth: 100pxのように固定していたとしても縮小するようになります。
デフォルトには1が設定されています。要素を縮小させたくない場合は0を設定します。
<div class="parent">
<div class="child" style="flex-shrink: 2">1</div>
<div class="child" style="flex-shrink: 1">2</div>
<div class="child" style="flex-shrink: 0">3</div>
<div class="child" style="width: 100%">4</div>
</div>flex-basis
子要素の基本の幅を指定します。デフォルトはautoとなっており、要素自身の幅（width）が設定されます。
<div class="parent">
<div class="child" style="width: 200px">1</div>
<div class="child" style="width: 200px; flex-basis: 400px">2</div>
</div>flex
flexは、flex-grow、flex-shrink、flex-basisをまとめて指定するのに使用します。
一般的にこれら 3 つのプロパティはflexを使って設定します。
flexは指定するプロパティの数や種類によって設定する内容が異なります。
プロパティが 1 つの場合は、flex-growの値を設定します。flex-shrinkは1、flex-basisは0が設定されます。
.child {
flex: 1;
}
/* 以下と同義 */
.child {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
}プロパティが 2 つの場合は、2 つめの値の種類によって設定内容が異なります。
数値の場合はflex-shrink、長さの場合はflex-basisが設定されます。
.child {
flex: 1 0;
}
/* 以下と同義 */
.child {
flex-grow: 1;
flex-shrink: 0;
flex-basis: 0;
}.child {
flex: 1 200px;
}
/* 以下と同義 */
.child {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 200px;
}プロパティ 3 つの場合は、flex-grow、flex-shrink、flex-basisの順で指定します。
.child {
flex: 1 0 200px;
}
/* 以下と同義 */
.child {
flex-grow: 1;
flex-shrink: 0;
flex-basis: 200px;
}例えば、可変長＋固定長のレイアウトを行う場合は次のようにできます。
<div class="container">
<div class="main">
</div>
<div class="side">
</div>
</div>.container {
display: flex;
}
.main {
flex: 1;
}
.side {
flex: 0 0 300px
}