1. 基本コンセプト
Flex レイアウトを採用する要素は、フレックス コンテナー、または略して「コンテナー」と呼ばれます。そのすべての子要素は、自動的にフレックス アイテム、または略して「アイテム」と呼ばれるコンテナのメンバーになります。コンテナーには、デフォルトで水平主軸と垂直交差軸の 2 つの軸があります。主軸の開始位置を主始点、終点を主終点、横軸の始点を横始点、終点を交点終点と呼びます。デフォルトでは、アイテムは主軸に沿って配置されます。 1つのアイテムが占める主軸のスペースをメインサイズ、1つのアイテムが占める横軸のスペースをクロスサイズと呼びます。以下に示すように:
ヒント: 要素の display プロパティを flex (ブロック レベルのフレックス コンテナーを生成する) または inline-flex (インライン ブロックに似たインライン ブロック レベルのフレックス コンテナーを生成する) に設定できます。要素にフレックス レイアウトが設定されている場合、その子要素の float、clear、vertical-align などのプロパティは無効になります。
フレックス レイアウトを実装するために、次のプロパティが CSS で提供されます。
属性 | 説明 |
---|---|
display | HTML 要素のボックス タイプを指定します |
flex-direction | フレックスボックス内の子要素の配置を指定します |
flex-wrap | フレックスボックスの子要素が親コンテナを超えた場合にラップするかどうかを設定します |
flex-flow | 2 つのプロパティ flex-direction と flex-wrap の省略形 |
justify-content | フレックスボックス内の要素の配置を主軸 (水平軸) の方向に設定します |
align-items | フレックスボックス内の要素の配置を横軸(縦軸)方向に設定します |
align-content | align-items と同様に flex-wrap プロパティの動作を変更しますが、子要素の配置を設定する代わりに、行の配置を設定します |
order | フレックスボックス内の子要素のソート順を設定する |
align-self | コンテナーの align-items プロパティをオーバーライドするために、フレックスボックスの子要素で使用されます |
flex | フレックスボックスの子要素がスペースを割り当てる方法を設定する |
flex-grow | フレックスボックスの拡大率を設定する |
flex-shrink | フレックスボックスの縮小率を設定する |
flex-basis | エラスティック ボックス ストレッチの基本値を設定します |
さまざまなスコープに従って、これらのプロパティは 2 つのカテゴリ、つまりコンテナー プロパティ (flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content) とアイテム プロパティ (order、align – self、flex、flex-grow、flex-shrink、flex-basis)。これらの属性の使用法を紹介しましょう。
2.コンテナのプロパティ
1)flex-direction
flex-direction 属性は、主軸の方向 (つまり、アイテムが配置される方向) を決定するために使用されます. 属性のオプションの値は次のとおりです:
価値 | 説明 |
---|---|
row | デフォルトでは、主軸は左から右に水平に伸びます |
row-reverse | 主軸は右から左へ水平に走る |
column | 主軸は上から下に垂直に走る |
column-reverse | 主軸は下から上に垂直に走る |
initial | このプロパティをプロパティのデフォルト値として設定します |
inherit | この属性の値を親要素から継承します |
サンプルコードは次のとおりです。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#migi {
border: 1px solid #CCC;
padding: 5px;
position: relative;
}
.yoko, .yoko_reverse, .tate, .tate_reverse{
display: flex;
margin-bottom: 5px;
}
.yoko {
flex-direction: row;
}
.yoko_reverse {
flex-direction: row-reverse;
}
.tate {
flex-direction: column;
}
.tate_reverse {
flex-direction: column-reverse;
position: absolute;
top: 120px;
left: 400px;
}
.yoko div, .yoko_reverse div, .tate div, .tate_reverse div {
width: 50px;
height: 50px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="migi">
<div class="yoko">
<div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
</div>
<div class="yoko_reverse">
<div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
</div>
<div class="tate">
<div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
</div>
<div class="tate_reverse">
<div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
</div>
</div>
</body>
</html>
実行結果は次の図のとおりです。
2)flex-wrap
flex-wrap 属性は、フレックス ボックスの子要素 (項目) が親コンテナーを超える場合にラップするかどうかを設定するために使用されます. 属性のオプション値は次のとおりです:
価値 | 説明 |
---|---|
nowrap | デフォルト値。アイテムがラップされないことを意味します |
wrap | 必要に応じてアイテムが折り返されることを示します |
wrap-reverse | アイテムが必要に応じて折り返されることを示しますが、逆の順序になります |
initial | このプロパティをプロパティのデフォルト値として設定します |
inherit | 親要素から属性の値を継承する |
サンプルコードは次のとおりです。
<!DOCTYPE html>
<html lang="ja">
<head>
<style>
#main {
border: 1px solid #CCC;
padding: 5px;
}
.nowrap, .wrap, .wrap_reverse {
display: flex;
flex-direction: row;
margin-bottom: 15px;
}
.nowrap {
flex-wrap: nowrap;
}
.wrap {
flex-wrap: wrap;
}
.wrap_reverse {
flex-wrap: wrap-reverse;
}
.nowrap div, .wrap div, .wrap_reverse div {
width: 70px;
height: 50px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="main">
<div class="nowrap">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
</div>
<div class="wrap">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
</div>
<div class="wrap_reverse">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
</div>
</div>
</body>
</html>
実行結果は次の図のとおりです。
3)flex-flow
flex-flow 属性は、2 つの属性 flex-direction と flex-wrap の省略形です。構文は次のとおりです。
フレックス フロー: フレックス方向フレックス ラップ。
サンプルコードは次のとおりです。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.フレックス_フロー {
display: flex;
flex-flow: row-reverse wrap;
}
.フレックス_フロー div {
width: 60px;
height: 60px;
margin-bottom: 5px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="フレックス_フロー">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
</div>
</body>
</html>
実行結果は次の図のとおりです。
4)justify-content
justify-content 属性は、主軸 (水平軸) の方向に弾性ボックス内の要素の配置を設定するために使用されます. 属性のオプションの値は次のとおりです:
価値 | 説明 |
---|---|
flex-start | デフォルト、左揃え |
flex-end | 右揃え |
center | 中央に |
space-between | 正当化され、アイテム間の間隔は等しい |
space-around | 各アイテムの両側に等間隔 |
initial | このプロパティをプロパティのデフォルト値として設定します |
inherit | 親要素から属性の値を継承する |
サンプルコードは次のとおりです。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.flex {
display: flex;
flex-flow: row wrap;
margin-top: 10px;
}
.flex div {
width: 60px;
height: 60px;
margin-bottom: 5px;
border: 1px solid black;
}
.flex-start {
justify-content: flex-start;
}
.flex-end {
justify-content: flex-end;
}
.center {
justify-content: center;
}
.space-between {
justify-content: space-between;
}
.space-around {
justify-content: space-around;
}
</style>
</head>
<body>
<div class="flex flex-start">
<div>エー</div><div>ビー</div><div>シー</div><div>ディー</div>
</div>
<div class="flex flex-end">
<div>エー</div><div>ビー</div><div>シー</div><div>ディー</div>
</div>
<div class="flex center">
<div>エー</div><div>ビー</div><div>シー</div><div>ディー</div>
</div>
<div class="flex space-between">
<div>エー</div><div>ビー</div><div>シー</div><div>ディー</div>
</div>
<div class="flex space-around">
<div>エー</div><div>ビー</div><div>シー</div><div>ディー</div>
</div>
</body>
</html>
実行結果は次の図のとおりです。
5)align-items
align-items 属性は、横軸 (垂直軸) の方向に弾性ボックス内の要素の配置を設定するために使用されます. 属性のオプションの値は次のとおりです:
価値 | 説明 |
---|---|
stretch | デフォルトでは、アイテムはコンテナに合わせて引き伸ばされます |
center | アイテムはコンテナの中央に配置されます |
flex-start | アイテムはコンテナの上部にあります |
flex-end | アイテムはコンテナの底にあります |
baseline | アイテムはコンテナのベースラインに揃えられます |
initial | このプロパティをプロパティのデフォルト値として設定します |
inherit | 親要素から属性の値を継承する |
6) align-content
align-content 属性は justify-content 属性に似ています. 弾性ボックスの横軸に余分なスペースがある場合に, コンテナ内のアイテムの配置を調整できます. この属性のオプション値は次のとおりです.次のように:
価値 | 説明 |
---|---|
stretch | デフォルト、残りのスペースを占めるようにアイテムを引き伸ばします |
center | アイテムはコンテナ内の中央に配置されます |
flex-start | アイテムはコンテナの上部に配置されます |
flex-end | コンテナの底にアイテムが配置されています |
space-between | 複数行のアイテムはコンテナ内で均等に分散され、最初の行がコンテナの上部に分散され、最後の行がコンテナの下部に分散されます。 |
space-around | 複数行のアイテムはコンテナ内で等間隔に配置され、各行はコンテナの端から等間隔で配置されます |
initial | このプロパティをプロパティのデフォルト値として設定します |
inherit | この属性の値を親要素から継承します |
1)order
order 属性は、コンテナに表示される項目の順序を設定するために使用されます。特定の値を使用して、コンテナ内の項目の位置を定義できます。属性の構文は次のとおりです。
order: number;
number はコンテナ内のアイテムの位置で、デフォルト値は 0 です。
サンプルコードは次のとおりです。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.flex {
display: flex;
flex-flow: row wrap;
margin-top: 10px;
}
.flex div {
width: 60px;
height: 60px;
margin-bottom: 5px;
border: 1px solid black;
}
.flex div:nth-child(1) {
order: 5;
}
.flex div:nth-child(2) {
order: 3;
}
.flex div:nth-child(3) {
order: 1;
}
.flex div:nth-child(4) {
order: 2;
}
.flex div:nth-child(5) {
order: 4;
}
</style>
</head>
<body>
<div class="flex">
<div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
</div>
</body>
</html>
実行結果は次の図のとおりです。
2)align-self
align-self 属性を使用すると、アイテムの配置を他のアイテムとは異なる方法で設定できます。これにより、align-items 属性の値をオーバーライドできます。 align-self 属性のオプションの値は次のとおりです。
価値 | 説明 |
---|---|
auto | 要素がその親コンテナの align-items 属性の値を継承することを示すデフォルト値、または親コンテナがない場合は「ストレッチ」 |
stretch | アイテムはコンテナに収まるように引き伸ばされます |
center | アイテムはコンテナの中央に配置されます |
flex-start | アイテムはコンテナの上部にあります |
flex-end | アイテムはコンテナの底にあります |
baseline | アイテムはコンテナのベースラインに揃えられます |
initial | このプロパティをプロパティのデフォルト値として設定します |
inherit | 親要素から属性の値を継承する |
サンプルコードは次のとおりです。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.フレックス {
display: flex;
flex-flow: row wrap;
align-items: flex-end;
border: 1px solid #CCC;
height: 150px;
}
.フレックス div {
width: 60px;
height: 60px;
border: 1px solid black;
}
.フレックス div:nth-child(4) {
align-self: flex-start;
}
</style>
</head>
<body>
<div class="フレックス">
<div>あ</div><div>い</div><div>う</div><div>え</div><div>お</div>
</div>
</body>
</html>
実行結果は次の図のとおりです。
3) flex
flex 属性は、3 つの属性 flex-grow、flex-shrink、および flex-basis の省略形です。構文は次のとおりです。
flex: flex-grow flex-shrink flex-basis;
パラメータの説明は次のとおりです。
- flex-grow: (必須パラメーター) 数値。他のアイテムと比較してアイテムの成長を設定するために使用されます。デフォルト値は 0 です。
- flex-shrink: (オプションのパラメーター) 他のアイテムに対するアイテムの収縮を設定するために使用される数値。デフォルト値は 1 です。
- flex-basis: (オプションのパラメーター) アイテムの長さ。正当な値は auto (デフォルト値、自動を意味します)、inherit (属性の値が親要素から継承されることを示します)、または「%」と「」を追加します。 px” を特定の値、”em” などの単位に変換します。
さらに、flex 属性には auto (1 1 auto) と none (0 0 auto) という 2 つのショートカット値があります。
サンプルコードは次のとおりです。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.flex {
display: flex;
flex-flow: row wrap;
align-items: flex-end;
border: 1px solid #CCC;
}
.flex div {
width: 60px;
height: 60px;
border: 1px solid black;
}
.flex div:nth-child(2) {
flex:0;
}
.flex div:nth-child(4) {
flex:1 1 auto;
}
</style>
</head>
<body>
<div class="flex">
<div>あ</div><div>い</div><div>う</div><div>え</div><div>お</div>
</div>
</body>
</html>
実行結果は次の図のとおりです。
さらに、flex プロパティに加えて、flex-grow、flex-shrink、および flex-basis プロパティを使用して、アイテムの成長、収縮、およびアイテムの長さを設定することもできます。次に例を示します。