教材：侍テラコヤ『HTML/CSSの基礎を学ぼう』https://terakoya.sejuku.net/programs/51/chapters
フレックスボックスとは
柔軟にレイアウト組めるCSSのレイアウト手法のこと。
HTMLにコンテナ(親要素)とアイテム(子要素)を準備して使用する。
1. コンテナとアイテムを作成する
class="flexbox-container"をコンテナ、class="flexbox-item"をアイテムとする。
<!DOCTYPE html>
<html>
<head>
<title>タイトルです</title>
<meta charset="utf-8">
<link rel="stylesheet" href="flexbox.css">
</head>
<body>
<div class="flexbox-container">
<div id="item01" class="flexbox-item">
<p>アイテム01<br>（子要素）</p>
</div>
<div id="item02" class="flexbox-item">
<p>アイテム02<br>（子要素）</p>
</div>
<div id="item03" class="flexbox-item">
<p>アイテム03<br>（子要素）</p>
</div>
<div id="item04" class="flexbox-item">
<p>アイテム04<br>（子要素）</p>
</div>
<div id="item05" class="flexbox-item">
<p>アイテム05<br>（子要素）</p>
</div>
<div id="item06" class="flexbox-item">
<p>アイテム06<br>（子要素）</p>
</div>
<div id="item07" class="flexbox-item">
<p>アイテム07<br>（子要素）</p>
</div>
<div id="item08" class="flexbox-item">
<p>アイテム08<br>（子要素）</p>
</div>
</div>
</body>
</html>
2. CSSでコンテナにdisplay: flex;を指定
display: flex;を指定することでFlexboxが有効になる。プロパティの初期値がrowなので、アイテムが左から右に横並びに配置される。
3.コンテナにプロパティを指定
コンテナに指定を入れると子要素すべてに適用される。
【指定できるプロパティ】
- flex-direction : アイテムの並び順を指定
- flex-wrap : アイテムの折り返しを指定
- flex-flow : 並び順と折り返しを一括で指定
- justify-content : アイテムの横方向(主軸)の揃え方を指定
- align-items : アイテムの縦方向(交差軸)の揃え方を指定
- align-content : アイテムを複数行にしたときの縦方向の揃え方
flex-direction : アイテムの並び順を指定
row(左から右)が初期値。row-reverseで右から左、columnで上から下、column-reverseで下から上に配置する。
.flexbox-container {
display: flex;
flex-direction: row-reverse;
padding: 5px;
background-color: lightcyan;
}
flex-wrap : アイテムの折り返しを指定
nowrap(折り返しなし)が初期値。wrapで上から下に折り返し、wrap-reverseで下から上に折り返す。
.flexbox-container {
display: flex;
flex-wrap: wrap;
padding: 5px;
background-color: lightcyan;
}
justify-content : アイテムの横方向(主軸)の揃え方を指定
flex-start(左揃え)が初期値。flex-endで右揃え、centerで中央揃えになる。
ほか、space-between、space-aroudで均等配置。
align-items : アイテムの縦方向(交差軸)の揃え方を指定
stretch(コンテナの高さいっぱいに配置)が初期値。flex-startで上揃え、flex-endで下揃え、centerで中央揃えになる。
文字のベースラインで配置するときはbaselineを指定する。
★例 コンテナの高さを指定し、アイテムを下揃えで配置
.flexbox-container {
display: flex;
align-items: flex-end;
height: 500px;
padding: 5px;
background-color: lightcyan;
}
align-content : アイテムを複数行にしたときの縦方向の揃え方
stretch（コンテナの高さに広げて配置）が初期値。flex-start、flex-end、centerで上下中央を指定。
space-between、space-aroudで均等配置。
★例 折り返し指定で改行。一番下と上のアイテムを固定し、残りのアイテムを均等にする。
.flexbox-container {
display: flex;
flex-wrap: wrap;
align-content: space-between;
height: 500px;
padding: 5px;
background-color: lightcyan;
}
4.アイテムにプロパティを指定
アイテム一つ一つに個別のスタイルを適応する。
【指定できるプロパティ】
- order：アイテムの並び順を指定
- flex-grow：アイテムの伸長係数(どれくらい伸びるか)を指定
- flex-shrink：アイテムの縮小係数(どれくらい伸びるか)を指定
- flex-basis：幅の初期サイズを指定
- flex：伸長係数、縮小係数、幅の初期サイズを一括で指定
- align-self：アイテムの縦方向の揃え方を指定
order：アイテムの並び順を指定
コンテナに指定するflex-directionプロパティよりさらに細かく並び順を指定することができる。
.flexbox-container {
display: flex;
padding: 5px;
background-color: lightcyan;
}
.flexbox-item {
padding: 5px;
margin: 5px;
background-color: orange;
}
#item01 {
order: 5;
}
#item02 {
order: 6;
}
#item03 {
order: 7;
}
:
flex-grow：アイテムの伸長係数(どれくらい伸びるか)を指定
数値を指定する。初期値は0。
:
#item06 {
}
#item07 {
flex-grow: 1;
}
#item08 {
flex-grow: 2;
}
flex-shrink：アイテムの縮小係数(どれくらい伸びるか)を指定
数値を指定する。初期値は１。
#item01 {
flex-shrink: 2;
}
#item02 {
}
#item03 {
}
:
flex-basis：幅の初期サイズを指定
pxや%で指定。初期値はauto。
#item01 {
flex-basis: 150px;
}
#item02 {
flex-basis: 25%;
}
#item03 {
}
:
flex：伸長係数、縮小係数、幅の初期サイズを一括で指定
数値を指定する。半角スペースを空けて一括で指定。初期値は0、1、auto。
.flexbox-item {
padding: 5px;
margin: 5px;
background-color: orange;
flex: 1 1 200px;
}
align-self：アイテムの縦方向の揃え方を指定
#item01 {
align-self: flex-start; /*上揃え*/
}
#item02 {
}
#item03 {
align-self: center; /*中央揃え*/
}
#item04 {
}
#item05 {
align-self: flex-end; /*下揃え*/
}
#item06 {
}
#item07 {
align-self: baseline; /*文字のベースライン*/
}
#item08 {
}
プロパティを指定していないアイテムは、コンテナのalign-itemの値を継承する。
align-itemの値を指定しない場合は、初期値のautoで適用され、コンテナの高さいっぱいに広がる。