Flex レイアウトで適応型ページを作成する (構文と例)

Flex レイアウトの紹介

英語の Flex はフレキシブル ボックス、つまり伸縮性のあるボックスを意味します。Flex レイアウトは柔軟なレイアウトを意味します。

フレックスレイアウトはボックスモデルに優れた柔軟性を提供します。任意のコンテナをフレックスレイアウトとして指定できます。設定方法は次のとおりです。

。箱{
    ディスプレイ: フレックス;
}

インライン要素はFlexレイアウトを使用する

。箱{
    ディスプレイ: インラインフレックス;
}

WebkitベースのブラウザにはWebkitプレフィックスを追加する必要がある

。箱{
    ディスプレイ: フレックス;
    ディスプレイ: -webkit-flex;
}

注意: Flex レイアウトを使用した後、float、clear、vertical-align プロパティは無効になります。

Flexレイアウトの基本概念

Flex レイアウトを使用する要素は、Flex コンテナー、または略して「コンテナー」と呼ばれます。すべての子要素は自動的にコンテナ メンバーになり、Flex アイテム、または略して「アイテム」と呼ばれます。

デフォルトでは、コンテナーには水平の主軸と垂直の交差軸の 2 つの軸があります。主軸の開始位置（境界との交点）を主開始、終了位置を主終了、側軸の開始位置を交差開始、終了位置を交差終了と呼びます。

デフォルトでは、アイテムは主軸に沿って配置されます。一つのアイテムが占める主軸のスペースをメインサイズ、占める横軸のスペースをクロスサイズと呼びます。

コンテナのプロパティ

1. フレックス方向
2. フレックスラップ
3. フレックスフロー
4. コンテンツの正当化
5. アイテムの位置揃え
6. コンテンツの配置

1. フレックス方向はアイテムの配置方向を設定します。デフォルトは行です。

フレックス方向: 行 | 行反転 | 列 | 列反転
flex-direction: row に設定すると、効果は次のようになります。

flex-direction: row-reverse に設定すると、効果は次のようになります。

flex-direction: column に設定すると、効果は次のようになります。

flex-direction: column-reverse に設定すると、効果は次のようになります。

次のコードを直接コピーして HTML ファイルとして保存すると、効果を確認できます。

<スタイル タイプ="text/css">
。箱{
    ディスプレイ: フレックス;
    ディスプレイ: -webkit-flex;
    /*水平、左揃え*/
    flex-direction: 行;
    /*水平方向、右揃え*/
    /*フレックス方向: 行反転;*/
    /*垂直方向、上揃え*/
    /*フレックス方向: 列;*/
    /*垂直方向、下揃え*/
    /*フレックス方向: 列反転;*/
    背景: #999;
    幅: 100%;
}
.box スパン{
    マージン: 10px 10px;
    パディング: 10px;
    背景: #ff0;
    幅: 50px;
}
</スタイル>
<div class="box">
    <span>こんにちは 1</span>
    <span>こんにちは 2</span>
    <span>こんにちは 3</span>
    <span>こんにちは 4</span>
</div>

2. flex-wrapはアイテムが同じ行にあるかどうかを設定します。デフォルトはnowrapです。

flex-wrap: wrap | nowrap | wrap-reverse
flex-wrap: wrap に設定すると、効果は次のようになります。

flex-wrap: nowrap に設定した場合の効果（改行なし、デフォルトでスケーリング）:

flex-wrap: wrap-reverse に設定すると、効果は次のようになります (最初の行は以下のとおりです)。

次のコードを直接コピーして HTML ファイルとして保存すると、効果を確認できます。

<スタイル タイプ="text/css">
。箱{
    ディスプレイ: フレックス;
    ディスプレイ: -webkit-flex;
    /*改行*/
    /*flex-wrap: wrap;*/
    /*改行なし、デフォルト*/
    /*flex-wrap: nowrap;*/
    /*折り返し、最初の行は以下です*/
    /*flex-wrap: wrap-reverse;*/
    背景: #999;
    幅: 100%;
}
.box スパン{
    マージン: 10px 10px;
    パディング: 10px;
    背景: #ff0;
    幅: 50px;
}
</スタイル>
<div class="box">
    <span>こんにちは 1</span>
    <span>こんにちは 2</span>
    <span>こんにちは 3</span>
    <span>こんにちは 4</span>
    <span>こんにちは 5</span>
    <span>こんにちは6</span>
    <span>こんにちは7</span>
</div>

3. flex-flow属性はflex-direction属性とflex-wrap属性の短縮形です。デフォルト値はrow nowrapです。

4. justify-contentプロパティは、主軸上のアイテムの配置を定義します。デフォルト値はflex-startです。

コンテンツの配置: flex-start | flex-end | center | space-between | space-around
justify-content: flex-start に設定すると、効果は次のようになります。

justify-content: flex-end に設定すると、効果は次のようになります。

justify-content: center に設定すると、効果は次のようになります。

justify-content: space-between に設定すると、効果は次のようになります。

justify-content: space-around に設定すると、効果は次のようになります。

次のコードを直接コピーして HTML ファイルとして保存すると、効果を確認できます。

<スタイル タイプ="text/css">
。箱{
    ディスプレイ: フレックス;
    ディスプレイ: -webkit-flex;
    /* デフォルトでは、項目は左揃えになります */
    コンテンツの配置: flex-start;
    /*項目を右揃えにする*/
    /*コンテンツの両端揃え: flex-end;*/
    /* アイテムを中央に配置する */
    /*コンテンツの中央揃え;*/
    /*両端に項目を揃える*/
    /*コンテンツの両端揃え: スペース間の間隔;*/
    /*各項目の両側に等間隔*/
    /*コンテンツの両端揃え: スペースの周囲;*/
    背景: #999;
    幅: 100%;
}
.box スパン{
    マージン: 10px 10px;
    パディング: 10px;
    背景: #ff0;
    幅: 50px;
}
</スタイル>
<div class="box">
    <span>こんにちは 1</span>
    <span>こんにちは 2</span>
    <span>こんにちは 3</span>
    <span>こんにちは 4</span>
    <span>こんにちは 5</span>
    <span>こんにちは6</span>
    <span>こんにちは7</span>
</div>

5. align-items 属性は、垂直軸上のアイテムの配置を定義します。デフォルト値は、垂直軸上のアイテムの高さが異なる場合に適した「stretch」です。効果をよりよく確認するために、アイテムにいくつかのスタイルを追加しました。

align-items: flex-start | flex-end | center | baseline | Stretch
align-items: flex-start に設定すると、効果は次のようになります。

align-items: flex-end に設定すると、効果は次のようになります。

align-items: center に設定すると、効果は次のようになります。

align-items: baseline に設定すると、効果は次のようになります。

align-items:stretch に設定すると、効果は次のようになります。

次のコードを直接コピーして HTML ファイルとして保存すると、効果を確認できます。

<スタイル タイプ="text/css">
。箱{
    ディスプレイ: フレックス;
    ディスプレイ: -webkit-flex;
    /*垂直軸の上端を揃える*/
    /*アイテムの位置揃え: flex-start;*/
    /* 垂直軸の下揃え */
    /*align-items: flex-end;*/
    /*垂直軸の中心点を揃える*/
    /*項目の位置合わせ: 中央;*/
    /*プロジェクト内の最初のテキスト行のベースライン配置*/
    /*アイテムの位置揃え: ベースライン;*/
    /*デフォルトの配置。アイテムの高さが設定されていないか、自動に設定されている場合、コンテナーの高さ全体を占めます*/
    アイテムの位置を揃える: ストレッチ;
    背景: #999;
    幅: 100%;
}
.box スパン{
    マージン: 10px 10px;
    パディング: 10px;
    背景: #ff0;
    幅: 50px;
}
.box span:n番目の型(2n){
    高さ: 80px;
    パディング上部: 20px;
}
</スタイル>
<div class="box">
    <span>こんにちは 1</span>
    <span>こんにちは 2</span>
    <span>こんにちは 3</span>
    <span>こんにちは 4</span>
    <span>こんにちは 5</span>
    <span>こんにちは6</span>
    <span>こんにちは7</span>
</div>

6. align-content 属性は複数の軸の配置を定義します。プロジェクトにグリッド ラインが 1 つしかない場合、このプロパティは効果がありません。 （つまり、コンテナのflex-wrapプロパティ値をラップするように設定する必要があります）（効果をより明確にするために、コンテナの高さを設定しました）

align-content: flex-start | flex-end | center | space-between | space-around | Stretch
align-content: flex-start に設定すると、効果は次のようになります。

align-content: flex-end に設定すると、効果は次のようになります。

align-content: center に設定すると、効果は次のようになります。

align-content: fspace-between に設定すると、効果は次のようになります。

align-content: flex-start に設定すると、効果は次のようになります。

align-content: Stretch に設定すると、効果は次のようになります。

次のコードを直接コピーして HTML ファイルとして保存すると、効果を確認できます。

<スタイル タイプ="text/css">
。箱{
    ディスプレイ: フレックス;
    ディスプレイ: -webkit-flex;
    flex-wrap: ラップ;
    /*垂直軸の上部に揃える*/
    /*align-content: flex-start;*/
    /*垂直軸の下部に揃える*/
    /*align-content: flex-end;*/
    /*垂直軸の中心点に合わせる*/
    /*コンテンツの位置合わせ: 中央;*/
    /*垂直軸の両端に揃える*/
    /*コンテンツの位置合わせ: スペース間の間隔;*/
    /*各軸の両側の間隔は等しい*/
    /*コンテンツの位置揃え: スペースを空ける;*/
    /*デフォルト値、軸線は交差軸のデフォルト値全体を占めます、*/
    align-content: ストレッチ;
    背景: #999;
    幅: 600ピクセル;
    高さ: 300px;
}
.box スパン{
    マージン: 10px 10px;
    パディング: 10px;
    背景: #ff0;
    幅: 50px;
}
</スタイル>
<div class="box">
    <span>こんにちは 1</span>
    <span>こんにちは 2</span>
    <span>こんにちは 3</span>
    <span>こんにちは 4</span>
    <span>こんにちは 5</span>
    <span>こんにちは6</span>
    <span>こんにちは7</span>
</div>

プロジェクトプロパティ

1. 注文
2. フレックスグロー
3. フレックスシュリンク
4. フレックスベース
5. フレックス
6. 整列

1. order は、項目が配置される順序を定義します。値が小さいほど、順位が高くなります。デフォルト値は 0 です。

以下は、order属性を10に設定する最初の例、order属性を-1に設定する2番目の例、order属性を-10に設定する5番目の例です。効果は次のようになります。

次のコードを直接コピーして HTML ファイルとして保存すると、効果を確認できます。

<スタイル タイプ="text/css">
。箱{
    ディスプレイ: フレックス;
    ディスプレイ: -webkit-flex;
    背景: #999;
}
.box スパン{
    マージン: 10px 10px;
    パディング: 10px;
    背景: #ff0;
}
.box span:n番目の型(1){
    注文: 10;
}
.box span:nth-of-type(2){
    順序: -1;
}
.box span:nth-of-type(5){
    順序: -10;
}
</スタイル>
<div class="box">
    <span>こんにちは 1</span>
    <span>こんにちは 2</span>
    <span>こんにちは 3</span>
    <span>こんにちは 4</span>
    <span>こんにちは 5</span>
</div>

2. flex-grow 属性は、アイテムの拡大率を定義します。主に、親要素の幅が子要素の幅の合計よりも大きい場合に機能します。子要素が親要素の残りの幅をどのように分配するかを定義します。デフォルト値は 0 で、この時点では親要素の幅は要求されません。

以下に示すように、最初の子要素の flex-grow 属性の値は 1 に設定され、2 番目の子要素の flex-grow 属性の値は 1 に設定されています。次に、親要素の残りの幅が 3 つの均等な部分に分割され、それぞれ最初の子要素と 2 番目の子要素に追加されます。効果は次のようになります。

次のコードを直接コピーして HTML ファイルとして保存すると、効果を確認できます。

<スタイル タイプ="text/css">
。箱{
    ディスプレイ: フレックス;
    ディスプレイ: -webkit-flex;
    背景: #999;
}
.box スパン{
    マージン: 10px 10px;
    パディング: 10px;
    背景: #ff0;
    幅: 50px;
}
.box span:n番目の型(1){
    フレックス成長: 1;
}
.box span:nth-of-type(2){
    フレックス成長: 2;
}
</スタイル>
<div class="box">
    <span>こんにちは 1</span>
    <span>こんにちは 2</span>
    <span>こんにちは 3</span>
    <span>こんにちは 4</span>
    <span>こんにちは 5</span>
</div>

たとえば、上記の例で、親要素の幅が 1000 ピクセル、各子要素の幅が 100 ピクセルであるとすると、500 ピクセルの幅が残ります。最初の子要素の flex-grow 値は 1、2 番目の子要素の flex-grow 値は 2 です。すると、500 ピクセルは 3 つの均等な部分に分割されます。最初の子要素の幅は 500 倍の 1/3 ピクセル増加し、2 番目の子要素の幅は 500 倍の 2/3 ピクセル増加します。

3. flex-shrink 属性は、アイテムの縮小率を定義します。デフォルト値は 1 で、スペースが不足している場合はアイテムが縮小されることを意味します。

プロジェクトに flex-shrink プロパティが設定されていない場合、プロジェクトのデフォルトの flex-shrink 値は 1 になります。スペースが不足している場合は、項目が比例して縮小されます。 1 つのアイテムの flex-shrink プロパティが 0 で、他のアイテムが 1 の場合、スペースが不足しても flex-shrink プロパティが 0 のアイテムは縮小されません。

flex-shrink の原理は flex-grow と似ており、一方を理解するのは難しくなく、もう一方も難しくありません。

4. flex-basisプロパティは、余分なスペースを割り当てる前にアイテムが占めるスピンドルスペースを定義します（デフォルト値はアイテムの元のサイズであるautoです）

注意: アイテムに対して flex-basis プロパティと width プロパティの両方の値を設定すると、flex-basis が wi​​dth の値を上書きします。たとえば、プロジェクトのプロパティを同時に flex-basis: 80px; width: 100px; と設定すると、プロジェクトの実際の幅は 80px になります。

5. フレックス属性

flex プロパティは、flex-grow、flex-shrink、flex-basis の略語です。デフォルト値は 0 1 auto です。

6. align-selfプロパティ

align-self プロパティを使用すると、align-items プロパティをオーバーライドして、個々の項目を他の項目とは異なる位置に配置することが可能になります。デフォルト値は auto で、親要素の align-items 属性を継承することを意味します。親要素がない場合、stretch と同等になります。

次のコードを直接コピーして HTML ファイルとして保存すると、効果を確認できます。

<スタイル タイプ="text/css">
。箱{
    ディスプレイ: フレックス;
    ディスプレイ: -webkit-flex;
    背景: #999;
    高さ: 300px;
    align-items:flex-start;
}
.box スパン{
    マージン: 10px 10px;
    パディング: 10px;
    背景: #ff0;
}
.box span:nth-of-type(3){
    align-self:flex-end;
}
</スタイル>
<div class="box">
    <span>こんにちは 1</span>
    <span>こんにちは 2</span>
    <span>こんにちは 3</span>
    <span>こんにちは 4</span>
    <span>こんにちは 5</span>
</div>

参照:

[1] http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

[2] https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/CSS_flexible_boxesの使用

[3] http://blog.csdn.net/qiudw_01/article/details/47061099

[4] https://www.w3cplus.com/css3/a-guide-to-flexbox-new.html

Flex レイアウトを使用してアダプティブ ページを作成する方法 (文法とケース) に関するこの記事はこれで終わりです。Flex レイアウトのアダプティブ ページに関する関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。