CSS 3 では、CSS フレキシブル ボックス モジュールは非常に重要なモジュールであり、非常に柔軟な方法でページ レイアウト処理を実装するために使用されます。
他の CSS スタイル属性を使用してページ レイアウト処理を実装することもできますが、CSS Flexible Box モジュールで定義されているフレキシブル ボックス レイアウト技術を使用すると、ページ内の各ローカル領域の表示モードを画面に応じて自動的に調整できますつまり、非常に柔軟なレイアウト処理を実現します。
CSS Flexible Box モジュールは数年前から発表されていますが、モジュールで定義されている内容は最初の発表以来、いくつかの大きな改訂を受けています。現在発表されている正式バージョンは、CSS Flexible Box Layout Module - W3C Candidate Recommendation (2012 年 9 月 18 日) です。
これまでのところ、Opera 12.10 以降、IE 11 以降、Chrome 21 以降、Firefox 22 以降のブラウザはすべて、この最新バージョンをサポートしています。
次に、サンプル ページから最新バージョンの flexbox レイアウトの学習を開始します。このサンプルページの body 要素のコードは次のとおりです。
<body><div id="main"> <div class="content"> <section> <h1>section 1</h1> <p>示例文字</p> </section> <section> <h1>section 2</h1> <p>示例文字</p> </section> <section> <h1>section 3</h1> <p>示例文字</p> </section> <section> <h1>section 4</h1> <p>示例文字</p> </section> </div> <div class="content"> <section> <h1>section 5</h1> <p>示例文字</p> <section> <h1>section 6</h1> <p>示例文字</p> </section> <section> <h1>section 7</h1> <p>示例文字</p> </section> <section> <h1>section 8</h1> <p>示例文字</p> </section> </div> <div class="content"> <section> <h1>section 9</h1> <p>示例文字</p> </section> <section> <h1>section 10</h1> <p>示例文字</p> </section> <section> <h1>section 11</h1> <p>示例文字</p> </section> <section> <h1>section 12</h1> <p>示例文字</p> </section> </div></div></body>
次に、まずページ内の各 div 要素とセクション要素の境界線のスタイルを指定します。 コードは次のとおりです。
<style>#main { border: 1px dotted #f0f; padding: 1em;}.content { border: 1px dotted #0ff; padding: 1em;}section { border: 1px dotted #f00; padding: 1em;}</style>これまでのサンプル ページをブラウザで開きます。以下の図に示すように、ページ上の要素が上から下に垂直に配置されます。
フレックスボックス レイアウトを指定する方法は次のとおりです: レイアウトする必要がある要素のコンテナー要素で display:flex スタイル属性を使用します。 CSS フレキシブル ボックス モジュールでは、コンテナ要素内の各要素を「フレックス アイテム」と呼び、コンテナ要素を「フレックス コンテナ」と呼びます。
フレキシブル ボックス レイアウトと float およびその他のスタイル属性を使用したレイアウトの主な違いの 1 つは、float およびその他のスタイル属性を使用する場合、フレキシブル ボックス レイアウトを使用する場合は、コンテナ内の各要素に対してスタイル属性を指定する必要があることです。スタイル属性をコンテナ要素に割り当てる必要があります。
次に、最初に、スタイル クラス名コンテンツを持つすべての div 要素にフレキシブル ボックス レイアウトを使用します。これらの div 要素のコンテナ要素は、id 属性値を main とする div 要素です。この要素のスタイル コードを次のように変更します。
#main { border: 1px dotted #f0f; padding: 1em; display: flex;}
要素の配置方向を設定する
#main { border: 1px dotted #f0f; padding: 1em; display: flex; flex-direction: row-reverse;}
次に、まず、スタイルクラス名の内容を持つすべての div 要素の配置を水平および前方配置に復元し、id 属性値を main に持つ div 要素のスタイル コードを以下のように変更します。すべてのスタイル クラス content という名前の div 要素は、flex-direction: column-reverse; スタイル属性を指定します。ページ内の要素を下図のように上下逆配置（sectionサブ要素内のsection孫要素を除く）に変更します。
並べ替え順序を指定するには、order style 属性を使用します
フレキシブル ボックス レイアウトを使用する場合、order 属性を使用して各要素の表示順序を変更できます。各要素のスタイルに order 属性を追加できます。この属性は、表示時にシリアル番号を表す整数の属性値を使用します。これらの要素は、シリアル番号の小さいものから大きいものまで表示されます。
次に、まずコンテンツのスタイルクラス名を持つすべての div 要素のすべてのセクションサブ要素の配置を垂直および前方配置に設定します。コンテンツのスタイルクラス名を持つすべての div 要素のスタイルコードを次のように変更します。
#main { border: 1px dotted #f0f; padding: 1em; display: flex;}.content { border: 1px dotted #0ff; padding: 1em; display: flex; flex-direction: column-reverse;}ブラウザでサンプル ページを開きます。以下の図に示すように、ページ上のスタイル クラス名のコンテンツを持つすべての div 要素内の 2 番目のセクション サブ要素が、他のセクション サブ要素の前に表示されます。 。
要素の幅と高さを設定する
次に、まず横に配置された各要素の幅を設定する方法を紹介します。
flex 属性値を使用すると、すべての子要素の合計幅をコンテナーの幅と等しくすることができます。
接下来通过将所有样式类名为content的div元素的flex属性值设置为1的方法使所有样式类名为content的div元素的总宽度等于容器 元素，即id属性值为main的div元素的宽度，代码如下所示。当所有样式类名为content的div元素的flex属性值都被设置为1时，这些 div元素的宽度均等。
.content { border: 1px dotted #0ff; padding: 1em; display: flex; flex-direction: column; flex:1;}在浏览器中打开示例页面，所有样式类名为content的div元素的宽度自动增长，这些元素的总宽度等于容器元素，即id属性值为main的div元素的宽度,每一个样式类名为content的div元素的宽度均等，如下图所示。
接下来，我们设置第二个样式类名为content的div元素的flex属性值为2，代码如下所示。
.content:nth-child(2) { flex:2;}为了更清晰地计算元素宽度，我们取消所有元素的边框设置及内边距设置，修改后的完整样式代码如下所示。
<style>#main { display: flex;}.content { display: flex; flex-direction: column; flex:1;}.content section:nth-child(2) { order: -1;}.content:nth-child(2) { flex:2;}</style>在浏览器中打开示例页面，第二个样式类名为content的div元素宽度为其他样式类名为content的div元素宽度的两倍，假设这些元素的容 器元素，即id属性值为main的div元素的宽度等于600px，则第一个与第三个样式类名为content的div元素宽度的宽度均等于150px， 第二个样式类名为content的div元素宽度的宽度等于300px。
可以使用flex-grow属性来指定元素宽度，但是该样式属性对于元素宽度的计算方法与flex样式属性对于元素宽度的计算方法有所不同。
接下来指定所有样式类名为content的div元素的flex-grow样式属性值为1，宽度为150px,指定第二个样式类名为content的div元素的flex-grow样式属性值为为3。修改后的完整样式代码如下所示。
<style>#main { display: flex;}.content { display: flex; flex-direction: column; width:150px; flex-grow:1;}.content section:nth-child(2) { order: -1;}.content:nth-child(2) { flex-grow:3;}</style>在浏览器中打开示例页面，假设这些元素的容器元素，即id属性值为main的div元素的宽度等于600，则第一个与第三个样式类名为content 的div元素宽度的宽度均等于180px，第二个样式类名为content的div元素宽度的宽度等于240px。对于每个样式类名为content的 div元素宽度的计算步骤如下所示：
可以使用flex-shrink属性来指定元素宽度，该样式属性与flex-grow样式属性的区别在于：当子元素的width样式属性值的总和小于 容器元素的宽度值时，必须通过flex-grow样式属性来调整子元素宽度，当子元素的width样式属性值的总和大于容器元素的宽度值时，必须通过 flex-shrink样式属性来调整子元素宽度。
接下来指定所有样式类名为content的div元素的flex-shrink样式属性值为1，宽度为250px,指定第二个样式类名为content的div元素的flex-shrink样式属性值为为3。修改后的完整样式代码如下所示。
<style>#main { display: flex;}.content { display: flex; flex-direction: column; width:250px; flex-shrink:1;}.content section:nth-child(2) { order: -1;}.content:nth-child(2) { flex-shrink:3;}</style>在浏览器中打开示例页面，假设这些元素的容器元素，即id属性值为main的div元素的宽度等于600，则第一个与第三个样式类名为content 的div元素宽度的宽度均等于220px，第二个样式类名为content的div元素宽度的宽度等于160px。对于每个样式类名为content的 div元素宽度的计算步骤如下所示：
在使用flex-grow样式属性或flex-shrink样式属性调整子元素宽度时，也可以使用flex-basis样式属性指定调整前的子元素宽度，该样式属性与width样式属性的作用完全相同。
可以将flex-grow、flex-shrink以及flex-basis样式属性值合并写入flex样式属性中，方法如下所示。
flex:flex-grow样式属性值 flex-shrink样式属性值 flex-basis样式属性值;
在使用flex样式属性值时，flex-grow、flex-shrink以及flex-basis样式属性值均为可选用样式属性值，当不指定 flex-grow、flex-shrink样式属性值时，默认样式属性值均为1，当不指定flex-basis样式属性值时，默认样式属性值为0px。
修改本示例中的样式代码如下所示：
<style>#main { display: flex;}.content { display: flex; flex-direction: column; width:250px; flex:250px;}.content section:nth-child(2) { order: -1;}.content:nth-child(2) { flex:1 3 250px;}</style>在浏览器中打开示例页面，假设这些元素的容器元素，即id属性值为main的div元素的宽度等于600，则第一个与第三个样式类名为content的div元素宽度的宽度均等于220px，第二个样式类名为content的div元素宽度的宽度等于160px。
在子元素为横向排列时，flex、flex-grow、flex-shrink以及flex-basis样式属性均用于指定或调整子元素宽度，当子元 素为纵向排列时，flex、flex-grow、flex-shrink以及flex-basis样式属性均用于指定或调整子元素高度。
可以使用flex-wrap样式属性来指定单行布局或多行布局，可指定样式属性值如下所示：
接下来首先恢复页面内各div元素的边框与内边距(padding)的指定，同时指定所有样式类名为content的div元素的宽度为250px，代码如下所示。
<style>#main { border: 1px dotted #f0f; padding: 1em; display: flex;}.content { border: 1px dotted #0ff; padding: 1em; display: flex; flex-direction: column; flex:250px;}section { border: 1px dotted #f00; padding: 1em;}.content section:nth-child(2) { order: -1;}</style>然后指定容器元素，即id属性值为main的div元素的flex-wrap样式属性值为wrap，以指定允许对所有样式类名为content的div元素进行换行布局，代码如下所示。
#main { border: 1px dotted #f0f; padding: 1em; display: flex; flex-wrap: wrap;}在浏览器中打开示例页面，当浏览器窗口宽度不足以容纳三个样式类名为content的div元素时，最右边的样式类名为content的div元素被换行显示，如下图所示。
可以将flex-direction样式属性值与flex-wrap样式属性值合并书写在flex-flow样式属性中。以下两段代码的作用完全相同。
//使用flex-direction样式属性与flex-wrap样式属性.content { flex-direction: row; flex-wrap: wrap;}//使用flex-flow样式属性.content { flex-flow: row wrap;}接下来首先介绍弹性盒布局中的一些专用术语，在进行布局时这些术语的含义如下图所示。
justify-content属性用于指定如何布局容器中除了子元素之外的main axis轴方向（横向布局时main axis轴方向为水平方向，纵向布局时main axis轴方向为垂直方向）上的剩余空白部分。
当flex-grow属性值不为0时，各子元素在main axis轴方向上自动填满容器，所以justify-content属性值无效。
可指定justify-content属性值如下所示：
上述各属性值的区别如下图所示(灰色代表空白部分)。
align-items属性与justify-content属性类似，用于指定子元素的对齐方式，但是align-items属性指定的是 cross axis轴方向（横向布局时cross axis轴方向为垂直方向，纵向布局时cross axis轴方向为水平方向）上的对齐方式，可指定属性值如下所示。
上記の属性値の違いは下図のとおりです（灰色は空白部分を表します）。
align-self 属性と align-items 属性の違いは、align-items はコンテナ要素の style 属性として指定され、すべての子要素の配置を指定するために使用されるのに対し、align-self 属性は属性は、いくつかの子要素の style 属性として指定され、これらの子要素の配置を個別に指定します。たとえば、コンテナ要素の align-items 属性値を center (中央揃え) に指定した後、最初の子要素の align-self 属性値を flex-start (クロススタート端に揃える) として指定できます。指定する値は以下の通りです。
flex-end: クロスエンドから始まるすべての行をレイアウトします。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
