CSS フレキシブルレイアウト FLEX、メディアクエリ、モバイルクリックイベントの実装

フレックスレイアウト

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

デフォルトでは、コンテナーには水平のmain axisとcross axis 2 つの軸があります。

主軸の開始位置（境界との交点）をmain start 、終了位置をmain endと呼びます。交差軸の開始位置をcross start 、終了位置をcross endと呼びます。

デフォルトでは、アイテムは主軸に沿って配置されます。 1 つのアイテムが占める主軸空間をmain sizeと呼び、 1 つのアイテムが占める交差軸空間をクロスcross sizeと呼びます。

フレキシブルレイアウトの使い方: コンテナにdisplay:flexを設定するだけ

コンテナのプロパティ

 。箱
 { 
flex-direction: 行 | 行反転 | 列 | 列反転;
}

行
行を逆にする
カラム
列反転

<スタイル>
    ul:nth-of-type(1){ flex-direction:row;}
    ul:nth-of-type(2){ flex-direction:row-reverse;}
    ul:nth-of-type(3){flex-direction:column;}
    ul:nth-of-type(4){flex-direction:column-reverse;}
</スタイル>

。箱 
{ 
flex-wrap : nowrap | wrap | wrap-reverse ;
}

ナウラップ
包む
折り返し反転

<スタイル>
    ul:nth-of-type(1){flex-wrap:nowrap;}
    ul:nth-of-type(2){flex-wrap:wrap;}
    ul:nth-of-type(3){flex-wrap:wrap-reverse;}
</スタイル>

。箱 
{
justify-content: flex-start | flex-end | center | space-between | space-around;
}

フレックススタート
フレックスエンド
中心
間のスペース
スペースアラウンド

<スタイル>
    ul:nth-of-type(1){justify-content:flex-start;}
    ul:nth-of-type(2){justify-content:flex-end;}
    ul:nth-of-type(3){justify-content:center;}
    ul:nth-of-type(4){justify-content:space-between;}
    ul:nth-of-type(5){justify-content:space-around;}
</スタイル>

.box { align-items: flex-start | flex-end | center | baseline | stretch;}

フレックススタート
フレックスエンド
中心
ベースライン
ストレッチ

<スタイル>
    ul:nth-of-type(1){align-items:flex-start;}
    ul:nth-of-type(2){align-items:flex-end;}
    ul:nth-of-type(3){align-items:center;}
    ul:nth-of-type(4){align-items:baseline;}
    ul li{ 高さ:自動;}
    ul:nth-of-type(5){align-items:stretch;}
</スタイル>

align-contentプロパティは、複数の軸の配置を定義します。プロジェクトにグリッドラインが 1 つしかない場合、このプロパティは効果がありません。

.box {align-content: flex-start | flex-end | center | space-between | space-around | stretch;}

フレックススタート
フレックスエンド
中心
間のスペース
スペースアラウンド
ストレッチ

<スタイル>
    ul:nth-of-type(1){ flex-wrap:wrap; align-content:flex-start;}
    ul:nth-of-type(2){ flex-wrap:wrap; align-content:flex-end;}
    ul:nth-of-type(3){flex-wrap:wrap;align-content:center;justify-content:center;}
    ul:nth-of-type(4){ flex-wrap:wrap; align-content:space-between;}
    ul:nth-of-type(5){ flex-wrap:wrap; align-content:space-around;}
    ul li{ 高さ:自動;}
    ul:nth-of-type(6){flex-wrap:wrap;align-content:stretch;justify-content:center;}
</スタイル>

省略形:

flex-flow :

flex-flowプロパティはflex-directionプロパティとflex-wrapプロパティの短縮形であり、デフォルト値はrow nowrapです。 .

box {flex-flow: <flex-direction> || <flex-wrap>;}

プロジェクトプロパティ

order属性は、項目を並べ替える順序を定義します。値が小さいほど、順位が高くなります。デフォルト値は0です。

.item {order: <integer>;}

<スタイル>
    ul li:nth-of-type(3){order:1;}
    ul li:nth-of-type(2){order:2;}
    ul li:nth-of-type(1){order:3;}
    ul li:nth-of-type(5){order:4;}
    ul li:nth-of-type(4){order:5;}
</スタイル>

flex-growプロパティは、アイテムの拡大率を定義します。デフォルト値は0で、残りのスペースがある場合は拡大されないことを意味します。すべてのアイテムのflex-growプロパティが1場合、残りのスペース (ある場合) はアイテム間で均等に分割されます。 1 つのアイテムのflex-growプロパティが2で、他のアイテムの flex-grow プロパティが1場合、前者は他のアイテムの 2 倍のスペースを占めることになります。

.item { flex-grow: <number>; /* default 0 */}

<スタイル>
    ul li:nth-of-type(1){ flex-grow:1;}
    ul li:nth-of-type(2){ flex-grow:1;}
</スタイル>

flex-shrinkプロパティは、アイテムの縮小率を定義します。デフォルト値は1で、十分なスペースがない場合、アイテムは縮小されます。

すべてのアイテムのflex-shrinkプロパティが1の場合、スペースが不足するとすべてのアイテムが比例して縮小されます。

1 つの項目のflex-shrinkプロパティが0で、他の項目がすべて1場合、スペースが不足しても前者は縮小されません。

このプロパティでは負の値は無効です。

.item { flex-shrink: <number>; /* default 1 */}

<スタイル>
    ul li:nth-of-type(1){flex-shrink:0;}
    ul li:nth-of-type(2){flex-shrink:1;}
    ul li:nth-of-type(3){flex-shrink:2;}
    ul li:nth-of-type(4){flex-shrink:3;}
</スタイル>

flex-basisプロパティは、余分なスペースが配分される前のアイテムのmain sizeサイズを定義します。ブラウザはこのプロパティを使用して、主軸上に余分なスペースがあるかどうかを計算します。デフォルト値はautoで、アイテムの元のサイズになります。幅属性または高さ属性と同じ値 ( 350pxなど) に設定すると、アイテムは固定量のスペースを占有します。

.item { flex-basis: <length> | auto; /* default auto */}

<スタイル>
    ul li:nth-of-type(1){ flex-basis:50%;}
</スタイル>

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

.item { align-self: auto | flex-start | flex-end | center | baseline | stretch;}

<スタイル>
    ul{align-items:flex-start;}
    ul li{高さ: 自動}
    ul li:nth-of-type(1){ align-self:auto;}
    ul li:nth-of-type(2){ align-self:flex-start;}
    ul li:nth-of-type(3){ align-self:center; }
    ul li:nth-of-type(4){ align-self:flex-end;}
    ul li:nth-of-type(5){ align-self:baseline;line-height: 80px;}
    ul li:nth-of-type(6){ align-self:stretch;}
</スタイル>

flexプロパティ

flexプロパティは、 flex-grow 、 flex-shrink 、 flex-basisの略語です。デフォルト値は0 1 autoです。最後の 2 つの属性はオプションです。

.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]}

このプロパティには、 auto (1 1 auto)とnone (0 0 auto) 2 つのショートカット値があります。

ブラウザが関連する値を推測するため、3 つの個別のプロパティを個別に記述する代わりに、このプロパティを使用することをお勧めします。

メディアに関するお問い合わせ

<!DOCTYPE html>
<html>

<ヘッド>
    <タイトル></タイトル>
</head>

<本文>
</本文>
<script type="text/javascript">
/*
ビューポート
定義: ビューポートは、Web ページを表示するために使用できるデバイスの画面上の領域です。ピクセル密度が異なるため、CSS の 1 ピクセルはデバイスの 1 ピクセルと同じではありません。レイアウト ビューポート: レイアウト ビューポート。通常、モバイル デバイスのブラウザーは、デフォルトでビューポート メタ タグを設定して仮想レイアウト ビューポートを定義します。これは、モバイル フォンの初期ページの表示問題を解決するために使用されます。視覚ビューポート: 視覚ビューポートは、物理画面の表示領域、つまり画面に表示される物理ピクセルを設定します。同じ画面の場合、ピクセル密度の高いデバイスでは、より多くのピクセルを表示できます。理想的なビューポート: 理想的なビューポートは、メタ タグを通じて取得されます。例: <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0">

* モバイルレイアウト * メタタグのコンテンツ属性の値 * width=device-width、height=device-height、現在のビューポートの幅と高さをデバイスの幅と高さと同じにします。固定値を設定して、高さを使用しないようにすることもできます。
    * initial-scale=1.0; 初期化スケール: 0.25-1.0
    * maximum-scale=1.0; 最大ズーム比を設定します: 0.25-1.0
    * minimum-scale=1.0; 最小スケール比を設定します: 0.25-1.0
    * user-scalable=no; ユーザーによるスケーリングを許可するかどうか。デフォルトは yes です。no に設定すると、スケーリングが許可されないため、minimax-scale と maximum-scale は無視されます。 * 例:
    * <meta id="viewport" name="viewport" content="width=デバイス幅、初期スケール=1.0、最大スケール=1、ユーザースケーラブル=いいえ">

* モバイル ジェスチャ イベント* PC イベントとの違い* PC の mousemove、mouseup、mousedown はモバイルでは失敗するか、異常に動作します* PC のクリック イベントは使用できます | 300 ミリ秒の問題については話さないでください | ただし、300 ミリ秒の遅延の問題が発生します: 初期の携帯電話: ダブルクリックしてズームインまたはズームアウトするかどうかを決定するために使用されました* 
    * モバイル端末イベント* touchstart: 指の押下によってトリガーされます* touchmove: 指が動くとトリガーされます* touched: 指が離れるとトリガーされます* touchcancel: イベントが中断されるとトリガーされます* 
    * モバイルイベントの実行順序: touchstart->touchmove->touched->click
    * 
    * touchEvent オブジェクトには、PC イベントと比較して 3 つの TouchList プロパティが追加されています。 * touches は、現在の画面上のすべての指のリストです。 * targetTouches は、現在の DOM オブジェクト上の指のリストです。 * changedTouhes は、状態が変更された指オブジェクトのリストです。 * 
    * 各 TouchList には複数のオブジェクトがあり、各 Touch オブジェクトには次のオブジェクト プロパティがあります。 * screenX: 画面の左側からの距離 * screenY: 画面の上部からの距離 * clientX: ブラウザーの左側からの距離 * clientY: ブラウザーの上部からの距離 * pageX: ページの左側からの距離 * pageY: ページの上部からの距離 * target: 現在タッチされている要素 * identifier: 現在のタッチ オブジェクトの ID。指を識別するために使用されます * radiusX、radiusY: 指のタッチ範囲 */
</スクリプト>
<スタイル タイプ="text/css">
/*メディアクエリ 1*/
* {
    マージン: 0;
    パディング: 0;
}

体 {
    背景色: ピンク;
}

/*レスポンシブなレイアウト効果を実現するには@mediaクエリを使用し、さまざまな条件に応じて異なるスタイルを設定します*/
/*screen はスクリーン、min-width: 1200px は最小幅が 1200px であることを意味します。言い換えると、スクリーン幅が 1200px 以上の場合のスタイルは何かということです */
@media 画面のみで (min-width:1200px) {

    /*ここにスタイルを記入してください*/
    体 {
        背景色: 赤;
    }
}

/*画面幅が800より大きく1199より小さい場合に表示されるスタイル*/
@media 画面のみで (最小幅: 800px) かつ (最大幅: 1199px) {
    体 {
        背景色: 水色;
    }
}

/*画面の幅が400より大きく640より小さい場合に表示されるスタイル*/
/*//メディアクエリに接続された部分がない場合、デフォルトの部分が表示されます*/
@media 画面のみで (最小幅: 400px) かつ (最大幅: 640px) {
    体 {
        背景色: 黄色;
    }
}
</スタイル>
<!-- 
	メディアクエリ 2 <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0">
	<link rel="stylesheet" href="css/m320.css" media="画面のみで (max-width:320px)">
	<link rel="stylesheet" href="css/m375.css" media="画面のみ、(最小幅:321px)、(最大幅:375px)">
	<link rel="stylesheet" href="css/m414.css" media="画面のみ、(最小幅:376px)、(最大幅:414px)">
 -->

</html>

モバイルクリックイベント

<!DOCTYPE html>
<html>

<ヘッド>
    <タイトル></タイトル>
</head>

<本文>
</本文>
<script type="text/javascript">
// モバイル ジェスチャ var box = document.querySelector('#box')
// PC側のクリックイベント box.addEventListener('click', function(e) {
    console.log('===========クリック=============');
    コンソールログ(e);
});
//指で押す box.addEventListener('touchstart', function(e) {
    console.log('===========タッチスタート=============');
    //Fn(e);
})
//指の動き box.addEventListener('touchmove', function(e) {
    console.log('==========touchmove=============');
    Fn(e);
})
//指を上げました box.addEventListener('touchend', function() {
    console.log('=============タッチエンド===========');
});
//中断後に開始する box.addEventListener('touchcancel', function() {
    アラート('============中断=================');
})

var touchesH1 = document.querySelector('#box h1:nth-of-type(1)');
var targettouchesH1 = document.querySelector('#box h1:nth-of-type(2)');
var changetouchesH1 = document.querySelector('#box h1:nth-of-type(3)');

関数Fn(e) {
    touchesH1.innerHTML = 'touches' + e.touches.length;
    targettouchesH1.innerHTML = 'targettouches' + e.targetTouches.length;
    changetouchesH1.innerHTML = 'changetouches' + e.changedTouches.length;

}

// タッチライブラリの使用（モバイル）
$('#box').tap(関数() {
    console.log('====タップ====')
})
$('#box').longTap(関数() {
    console.log('====長押し====')
})
$('#box').doubleTap(関数() {
    console.log('====ダブルタップ====')
})

$('#box').swiperLeft(関数() {
    console.log('====左タップ====')
})

// zepto ライブラリの使用 (モバイル)
$("#box").tap(関数() {
    console.log('======タップ=========');
})
$("#box").singleTap(function() {
    console.log('======シングルタップ=========');
})
$("#box").doubleTap(関数() {
    console.log('======ダブルタップ=========');
})
$("#box").longTap(関数() {
    console.log('======longTap=========');
})
$("#box").swipe(function() {
    console.log('======スワイプタップ=========');
})



// カスタム タッチ イベント ライブラリ // カスタム タッチ イベント ライブラリをカプセル化します // 注: この前にセミコロンが付いているのは、末尾にセミコロンがないと他のライブラリが参照されないようにするためです。セミコロンがないと、後でコードを圧縮するときに問題が発生する可能性があります。
(関数(ウィンドウ、未定義) {
    var クエリ = 関数(セレクタ) {
        query.fn.init(セレクタ) を返します。
    };

    query.fn = query.prototype = {
        //初期化メソッドは要素を取得するメソッドをシミュレートしますが、ここで取得されるのは実際の要素ではありません。実際の要素はオブジェクト全体の要素プロパティに格納されます init: function(selector) {
            if (typeofセレクタ == '文字列') {
                this.element = document.querySelector(セレクタ);
                これを返します。
            }
        },

        //クリック、ハンドラーはコールバック関数で、タップをクリックした後の応答関数です: function(handler) {
            this.element.addEventListener('touchstart', touchFn);
            this.element.addEventListener('touchend', touchFn);

            //区別や長押し、時間差判定を行うために使用する時間変数 var startTime, endTime;

            関数touchFn(e) {
                スイッチ (e.type) {
                    ケース 'タッチスタート':
                        //押された時刻を記録する startTime = new Date().getTime();
                        壊す;
                    ケース 'touchend':
                        // 退出イベントは時間を記録します endTime = new Date().getTime();
                        終了時間 - 開始時間 < 500 の場合 {
                            //ジェスチャが終了すると、コールバック ハンドラー();
                        }

                        壊す;

                }
            }
        },
        //長押し longTap: function(handler) {
            this.element.addEventListener('touchstart', touchFn);
            this.element.addEventListener('touchend', touchFn);
            //このモバイル イベントは他のイベントとの競合を解決するためのものです this.element.addEventListener('touchmove', touchFn);
            var 時間 ID;

            関数touchFn(e) {
                スイッチ (e.type) {
                    ケース 'タッチスタート':
                        // 押下が 500 ミリ秒に達すると、長押しとみなします。clearTimeout(timeId);

                        timeId = setTimeout(関数() {
                            ハンドラ（）;
                        }, 500);
                        壊す;
                    ケース 'touchend':
                        // 終了時にタイマーをクリアします clearTimeout(timeId);
                        壊す;
                    ケース 'touchmove':
                        // 移動したら、長押しタイマーをクリアします。clearTimeout(timeId);
                        壊す;

                }
            }
        },
        //ダブルクリック doubleTap: function(handler) {
            this.element.addEventListener('touchstart', touchFn);
            this.element.addEventListener('touchend', touchFn);

            //回数を記録する var tapCount = 0,
                タイムID;

            関数touchFn(e) {
                スイッチ (e.type) {
                    ケース 'タッチスタート':
                        //押されたときにtapCount++を1回記録します。
                        // 入ってきたらタイマーをクリアします clearTimeout(timeId);

                        timeId = setTimeout(関数() {
                            // 500 ミリ秒に達した場合はダブルクリックではないと判断され、tapCount をクリアする必要があります。tapCount = 0;
                        }, 500);
                        壊す;
                    ケース 'touchend':
                        // 退出時にタイマーをクリアする if (tapCount == 2) {
                            // 2 回押すと、ダブルクリック ハンドラーとみなされます ();
                            //ダブルクリックをトリガーした後、クリック数はクリアされます。tapCount = 0;
                            //タイマーをクリアする clearTimeout(timeId);
                        }

                        壊す;

                }
            }
        },
        //SwiperLeft: 関数(ハンドラ) {
            this.element.addEventListener('touchstart', touchFn);
            this.element.addEventListener('touchend', touchFn);

            //ジェスチャートリガー座標 var startX, startY, endX, endY;

            関数touchFn(e) {
                スイッチ (e.type) {
                    ケース 'タッチスタート':
                        //押下時の開始座標を記録する startX = e.targetTouches[0].pageX;
                        開始Y = e.targetTouches[0].pageY;
                        壊す;
                    ケース 'touchend':
                        // 終了時の終了座標を記録する endX = e.changedTouches[0].pageX;
                        endY = e.changedTouches[0].pageY;
                        //左スライドか右スライドかを判断する&& //左スライドか右スライドかを判断するif (Math.abs(endX - startX) >= Math.abs(endY - startY) && (startX - endX) >= 25) {
                            ハンドラ（）;
                        }
                        壊す;

                }
            }
        },
    }
    query.fn.init.prototype = query.fn;
    window.$ = window.query = クエリ;
}(ウィンドウ、未定義))
</スクリプト>

</html>

これで、CSS フレキシブルレイアウト FLEX、メディアクエリ、モバイルクリックイベントの実装に関するこの記事は終了です。CSS フレキシブルレイアウトに関する関連コンテンツをさらにご覧になりたい場合は、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: レスポンシブウェブデザインを実現するためにIEでCSS3メディアクエリをサポートする

>>: Linux で XFS パーティション形式のルートディレクトリを縮小する方法