主軸上のFlex子要素の比率を制御する方法

主軸上のFlex子要素の比率を制御する方法

背景

フレックス レイアウトにより、配置とスペースの割り当てがより効果的に実現されます。最近、flex子要素のサイズ計算ルール、主にflex-growとflex-shrinkの計算ルールについて学んでいます。

1. 基本概念

1.1 主軸

フレックス要素レイアウトの開始点と方向が定義され、フレックス子要素が主軸上に 1 つずつ配置されます。

主軸にはflex-directionで指定される 4 つの方向があります。

  • 行

水平方向、左から右、デフォルト

  • 行を逆にする

水平方向、右から左へ

  • カラム

垂直方向、上から下へ

  • 列反転

垂直方向、下から上へ

1.2 主軸サイズ

これは、フレックス コンテナー コンテンツの長方形 (パディング、境界線、および余白領域を除く) の主軸方向のサイズです。

1.3 交差軸

交差軸は主軸ハンマーの方向であり、主にフレックス要素の位置合わせに使用されます。

1.4 交差軸のサイズ

これは、クロス軸方向のフレックス コンテナー コンテンツの長方形 (パディング、境界線、および余白領域を除く) のサイズです。

1.5 フレックスボックスモデル

display がflexまたはinline-flexに設定されている要素は、flex コンテナーとも呼ばれます。

1. フレックス コンテナーには、フレックス アイテムだけでなく空きスペースも含まれます。

2. CSS は flex-directionflex-wrapflex-flow に関係します

  • フレックス方向
  • フレックスラップ
  • フレックスフロー

flex-direction と flex-wrap の略。

  • コンテンツの正当化

フレックス コンテナー コンテンツ (フレックス アイテムと空きスペース) の主軸に沿った配置を制御します。 align-items の違いに注意してください。

  • コンテンツの位置揃え

複数行のフレックス コンテナー内の行の配置を制御します。

  • アイテムを整列させる

フレックス コンテナー コンテンツ (フレックス アイテムと空きスペース) の交差軸方向の配置を制御します。

ヒント：

1. これらの CSS プロパティはすべて関連しています。

まず、フレックスコンテナの主軸の方向を指定します (flex-direction)。フレックス子要素が主軸のサイズを超えた場合に、折り返すかどうかを指定します (flex-wrap)。主軸のサイズを超えていない場合は、インライン配置 (justify-content) が必要になります。行が複数ある場合は、各行も直接配置する必要があります (align-content)。

2. justify-content、align-content、align-items を混同しやすい場合があります。

コンテンツはフレックス アイテムと空きスペースを指し、アイテムはフレックス アイテムを指すことに注意してください。これが、これら 3 つの属性の有用性です。

1.6 フレックスアイテム

1. 構文

フレックス ボックスの子要素には、フロー外の子要素 ​​(絶対固定要素) は含まれませんが、フロート要素は含まれます。

flex サブ要素の隣接するマージンは結合されません。

フロート要素がフレックス子要素として使用されている場合、フロートプロパティは無効になります (フローレイアウトではなくフレックスレイアウトに参加するため)。

2. CSSプロパティの使用

  • フレックスベース

フレックス要素が主軸方向に占めるフレックス コンテナーのサイズを指定します。デフォルトは auto です。つまり、フレックス要素のサイズが占有するサイズとして使用されます (主軸は行値を持つフレックス要素の幅、主軸は列値を持つフレックス要素の高さです)。空きスペースがあるかどうかは、この属性に基づいて計算されます。

注: flex 要素が占めるサイズは flex-basis に関連しており、要素の幅や高さとは直接関係がありません。

  • フレックスグロー

各フレックス要素の弾性成長係数、つまり占有される正の空きスペースの比例配分を指定します。値が0（デフォルト）の場合、空きスペースは占有されません。

  • フレックスシュリンク

各フレックス要素の弾性収縮係数、つまり割り当てられる負の空き領域の比例配分を指定します。ただし、要素を 0 まで無限に縮小したり、要素の最小サイズ (min-width や min-height など) よりも小さくしたりすることはできません。

  • フレックス

flex-grow flex-shrink flex-basis の略語

  • 整列-自己

交差軸上の位置合わせを調整します。このプロパティは、交差軸が完全に占有されていない場合にのみ有効です。

  • 注文

注文を指定する

2. 空き容量とフレックスベースの計算

主軸上の flex 子要素の比率は、次の 3 つの CSS プロパティによって決まります。

  • フレックスベース
  • フレックスグロー
  • フレックスシュリンク

で：
flex-basis + flex-growの組み合わせは拡張を制御します
flex-basis + flex-shrink の組み合わせは収縮を制御するため、主軸上の flex 子要素の比率を決定するには、まずどの組み合わせを使用するかを決定する必要があります。

2.1 ルール

flex-basisプロパティは、スペース割り当てが行われる前の flex 子要素の初期サイズを指定します。より正確には、 flex-basisプロパティは flex 子要素ボックス モデルのサイズ (box-sizing) を参照するため、flex 子要素の幅 (height) の値ロジックに似ています。box-sizing=content の場合、flex-basis にはパディングと境界領域は含まれません。

2.2 残りの空き容量の計算

空き容量の計算
フレックスコンテナのコンテンツ矩形の主軸方向のサイズ

フレックス コンテナの空き領域を計算する前に、予想される自己使用領域では、まずフレックス子要素が占めるサイズを数える必要があります。これはフレックス子要素の余白領域のサイズを指し、隣接するフレックス子要素の余白は結合されないことに注意してください。

残りの空き容量計算 = 空き容量計算 - 予想される自己使用容量

正の空き領域: 正の値を持つ残りの空き領域には、flex-basis + flex-grow の組み合わせが使用されます。

負の空き領域 負の値と正の値を持つ残りの空き領域には、flex-basis + flex-shrink の組み合わせが使用されます。

3. flex-growについて詳しく知る

3.1 ルール

正の空きスペースがある場合は、 flex-basis + flex-grow組み合わせを使用して、主軸上の flex 子要素の比率を計算します。正の空きスペースをケーキに例えると、 flex-grow取得したいケーキの量を表します。

  • flex-grow: 0.2ケーキの 20% を取得することを意味します。
  • flex-grow: 1ケーキ全体の 100% を取得することを意味します (他の兄弟を考慮しないと、少し多すぎます)。
  • flex-grow: 2ケーキの 200% を手に入れたいことを意味します (これはあからさまな強盗であり、態度は非常に明白です)。

しかし、結局のところ、ケーキは 1 つだけなので、フレックス コンテナーは、ケーキを比例して分割する簡単な方法を使用して、felx 子要素の要件を満たそうとします。

  • flex 子要素のflex-growを累積して合計を取得します。これは SUM_flex_grow と呼ばれます。
  • SUM_flex_grow=0 の場合、弾性成長は発生せず、プロセスは終了します。
  • フレックス子要素の成長のサイズ =正自由空間尺寸* flex_grow / Max(SUM_flex_grow, 1) 。

3.2 デモ1: ケーキを割合に応じて分ける

関数demo1() {
    戻る （
        <>
            <div className="flex">
                <div className="item" style={{flexBasis: 100, flexGrow: 1, marginRight: 10}}>1</div>
                <div className="item" style={{flexBasis: 150, flexGrow: 2, }}>2</div>
            </div>
            <スタイルjsx>{`
                .flex {
                    ディスプレイ: フレックス;
                    幅: 600ピクセル;
                    アウトライン: 1px 破線赤;
                }
                。アイテム {
                    パディング: 10px;
                    境界線: 10px 実線 #666666;
                }
            ` </スタイル>
        </>
    ）
}

分析：

残りの空き容量を計算する

  • フレックスコンテナの主軸サイズ = 600px
  • 要素 1 の希望サイズ = 100px(flex-basis) + 20px(padding-left/right) + 20px(border-left/right) + 10px(margin-right) = 150px
  • 要素 2 の希望サイズ = 150px(flex-basis) + 20px(padding-left/right) + 20px(border-left/right) = 190px
  • 残りの空きスペース = 600px - 150px - 190px = 260px、つまり、残りのスペースはプラスです。

各フレックス子要素の成長サイズを計算する

  • SUM_flex_grow = 1 + 2 = 3 は 1 より大きいです。ケーキ 1 個では足りないので、割合に応じて分けるしかありません。
  • 要素 1 の実際の成長サイズ = 260px * 1 / Max(1, 1 + 2) = 260px * 1 / (1 + 2) = 86.67px
  • 要素2の実際の成長サイズ = 260px * 2 / Max(1, 1 + 2) = 260px * 2 / (1 + 2) = 173.33px

3.3 デモ2: SUM(flex-grow) < 1

関数demo3() {
    戻る （
        <>
            <div className="flex">
                <div className="item" style={{flexBasis: 100, flexGrow: 0.2, marginRight: 10}}>1</div>
                <div className="item" style={{flexBasis: 150, flexGrow: 0.3, }}>2</div>
            </div>
            <スタイルjsx>{`
                .flex {
                    ディスプレイ: フレックス;
                    幅: 600ピクセル;
                    アウトライン: 1px 破線赤;
                }
                。アイテム {
                    パディング: 10px;
                    境界線: 10px 実線 #666666;
                }
            ` </スタイル>
        </>
    ）
}

分析：

残りの空き容量を計算する

  • フレックスコンテナの主軸サイズ = 600px
  • 要素 1 の希望サイズ = 100px(flex-basis) + 20px(padding-left/right) + 20px(border-left/right) + 10px(margin-right) = 150px
  • 要素 2 の希望サイズ = 150px(flex-basis) + 20px(padding-left/right) + 20px(border-left/right) = 190px
  • 残りの空きスペース = 600px - 150px - 190px = 260px、つまり、残りのスペースはプラスです。

各フレックス子要素の成長サイズを計算する

  • SUM_flex_grow = 0.2 + 0.3 = 0.5 となり、1 未満になります。1 つのケーキで全員のニーズを満たすことができ、各 flex 子要素に直接分配されます。
  • 要素 1 の実際の成長サイズ = 260px * 0.2 / Max(1, 0.5) = 260px * 0.2 = 52px
  • 要素2の実際の成長サイズ = 260px * 0.3 / Max(1, 0.5) = 260px * 0.3 = 78px

知らせ：

SUM(flex-grow) が 1 未満の場合、残りのスペースは各 flex 子要素に完全に割り当てられません。

3.3 Demo3はmax-widthと競合する

この例では次の点に注意してください。

  • 要素1、2、3 box-sizing=border-box
  • 要素 1 のmax-width=150px
関数demo4() {
    戻る （
        <>
            <div className="flex">
                <div className="item" style={{flexBasis: 100, flexGrow: 1, marginRight: 10, maxWidth: 150}}>1</div>
                <div className="item" style={{flexBasis: 150, flexGrow: 2 }}>2</div>
                <div className="item" style={{flexBasis: 100, flexGrow: 3 }}>3</div>
            </div>
            <スタイルjsx>{`
                .flex {
                    ディスプレイ: フレックス;
                    幅: 800ピクセル;
                    アウトライン: 1px 破線赤;
                }
                。アイテム {
                    パディング: 10px;
                    境界線: 10px 実線 #666666;
                    ボックスのサイズ: 境界線ボックス;
                }
            ` </スタイル>
        </>
    ）
}

分析：

残りの空き容量を計算する

フレックスコンテナの主軸サイズ = 800px

要素 1 の希望サイズ = 100px(flex-basis) + 10px(margin-right) = 110px
ボックスサイズ=境界ボックス

要素2の希望サイズ = 150px (flex-basis) = 150px
ボックスサイズ=境界ボックス

要素3の希望サイズ = 150px (flex-basis) = 150px
ボックスサイズ=境界ボックス

残りの空きスペース = 800px - 110px - 150px - 150px = 390px、つまり、残りのスペースはプラスです。

各フレックス子要素の成長サイズを計算する

  • SUM_flex_grow = 1 + 2 + 3 = 6 は 1 より大きいです。ケーキ 1 個では足りないので、割合に応じて分けるしかありません。 。
  • 要素1の成長サイズ = 390px * 1 / Max(1, 6) = 390px * 1/6 = 65px

このように、要素 1 のサイズは100px + 65px = 165px となり、 max-width=150pxで指定された最大値よりも大きくなるため、要素 1 の最終的なサイズは 150px になります。つまり、要素 1 は割り当てられたケーキを食べきれないので、食べ残したケーキを返して他の兄弟にもっと食べさせます (まず、これらの食べ残したケーキをどのように分配するかという疑問が生じます)。

要素 2 と要素 3 は空き領域を残すために再割り当てされます。つまり、手順 1 に戻って再計算することになります。

  • フレックスコンテナの主軸サイズ = 800px - 要素 1 が占めるサイズ (150px - 10px) = 640px
  • 残りのスペース = 640px - 150px - 150px = 340px
  • SUM_flex_grow = 2 + 3 = 5
  • 要素2の成長サイズ = 340px * 2 / Max(1, 5) = 340px * 2 / 5 = 136px
  • 要素3の成長サイズ = 340px * 3 / Max(1, 5) = 340px * 3 / 5 = 204px

3.4 要約:

  • 残りの空き容量を計算することが常に最初のステップです。
  • Growth は絶対値です。つまり、flex 子要素は絶対値だけ増加します (これは flex-shrink とは異なります)。
  • max-属性の競合が発生した場合、要素 1 で完了できないケーキが合計ケーキに追加され、後続の flex 子要素によって再分配されます。

4. フレックスシュリンクについて詳しく知る

4.1 ルール

負の空きスペースがある場合は、 flex-basis + flex-shrink組み合わせを使用して、主軸上の flex 子要素の比率を計算します。 flex-shrink値は、各 flex 子の貢献度を表します。

  • flex-shrink: 0.2負の空き領域の 20% を共有することを意味します。
  • flex-shrink: 1負の空き領域を 100% 共有することを意味します (1 つの兄弟には十分で、他の兄弟は共有する必要はありません)。
  • flex-shrink: 2負の空きスペースの 200% を分配することを意味します (分配の姿勢は非常に明確です)。

フレックス コンテナーは感動しましたが、各フレックス子要素の感情に配慮するために、「より合理的な」割り当てルールが採用されました。

  • 主軸上の flex 子要素のコンテンツ長方形と flex-shrink の積を計算します (A と表記)。
  • ステップ 1 の積の値を累積し、SUM_A として記録します。
  • 割り当てられた負の空き領域 valid_negative_free_space = negative_free_space * Min(1, SUM(flex-shrink))
  • 各フレックス項目の収縮値 = valid_negative_free_space * A / SUM_A 。

計算ルールは上記よりも複雑で、負の空きスペースの単純な分割ではありません。収縮の量は、flex-shrink だけでなく、flex-basis にも依存します。これは単に「より合理的」にするためであり、つまり、同じフレックス シュリンク条件の下では、フレックス ベースが小さいほど、フレックス要素の縮小が遅くなります (税金を支払うのと同じように、収入が高いほど支払う金額が多くなります)。

注意: flex-shrink の合計が 1 未満の場合、負の空き領域の一部が分散されていることを意味します (つまり、一部のサイズは縮小されません)。

4.2 デモ1：「富裕層と貧困層の格差を縮小する」

関数demo5() {
    戻る （
        <>
            <div className="flex">
                <div className="item" style={{flexBasis: 100, flexGrow: 1, marginRight: 10}}>1</div>
                <div className="item" style={{flexBasis: 150, flexGrow: 2, flexShrink: 2 }}>2</div>
            </div>
            <スタイルjsx>{`
                .flex {
                    ディスプレイ: フレックス;
                    幅: 300ピクセル;
                    アウトライン: 1px 破線赤;
                }
                。アイテム {
                    パディング: 10px;
                    境界線: 10px 実線 #666666;
                }
            ` </スタイル>
        </>
    ）
}

分析 (長すぎるとフレックス グロー プロセスに類似します):

残りの空き容量を計算する

  • フレックスコンテナの主軸サイズ = 300px
  • 要素 1 の希望サイズ = 100px(flex-basis) + 20px(padding-left/right) + 20px(border-left/right) + 10px(margin-right) = 150px
  • 要素 2 の希望サイズ = 150px(flex-basis) + 20px(padding-left/right) + 20px(border-left/right) = 190px
  • 残りの空きスペース = 300px - 150px - 190px = -40px、つまり、マイナスの残りスペースがあります。
  • 分配される残りの負のスペース = -40px * Min(1, 1 + 2) = -40px

各フレックスサブ要素の縮小サイズを計算する

  • SUM_A = 100ピクセル * 1 + 150ピクセル * 2 = 400ピクセル
  • 要素 1 の実際の縮小サイズ = 40px * 100px * 1 / 400px = 10px、つまり最終的な幅 = 100px - 10px = 90px
  • 要素2の実際の縮小サイズ = 40px * 150px * 2 / 400px = 30px、つまり最終的な幅 = 150px - 30px = 120px

4.2 デモ: SUM(flex-shrink) < 1

関数demo8() {
    戻る （
        <>
            <div className="flex">
                <div className="item" style={{flexBasis: 100, flexShrink: 0.2, marginRight: 10}}>1</div>
                <div className="item" style={{flexBasis: 150, flexShrink: 0.3 }}>2</div>
            </div>
            <スタイルjsx>{`
                .flex {
                    ディスプレイ: フレックス;
                    幅: 300ピクセル;
                    アウトライン: 1px 破線赤;
                }
                。アイテム {
                    パディング: 10px;
                    境界線: 10px 実線 #666666;
                }
            ` </スタイル>
        </>
    ）
}

フレックス アイテムはフレックス コンテナーを超えて拡張されます。

分析：

残りの空き容量を計算する

  • フレックスコンテナの主軸サイズ = 300px
  • 要素 1 の希望サイズ = 100px(flex-basis) + 20px(padding-left/right) + 20px(border-left/right) + 10px(margin-right) = 150px
  • 要素 2 の希望サイズ = 150px(flex-basis) + 20px(padding-left/right) + 20px(border-left/right) = 190px
  • 残りの空きスペース = 300px - 150px - 190px = -40px、つまり、マイナスの残りスペースがあります。
  • 有効な負の残りスペース = -40px * Min(1, 0.2 + 0.3) = -40px * 0.5 = -20px

各フレックスサブ要素の縮小サイズを計算する

  • SUM_A = 100ピクセル * 0.2 + 150ピクセル * 0.3 = 65ピクセル
  • 要素 1 の実際の縮小サイズ = 20px * 100px * 0.2 / 65px = 6.15px、つまり最終的な幅 = 100px - 6.15px = 93.85px
  • 要素2の実際の縮小サイズ = 20px * 150px * 0.3 / 65px = 13.85px、つまり最終的な幅 = 150px - 13.85px = 136.15px

4.4 デモ3: box-sizing = border-box

注: 要素 1、2 box-sizing= border-box

関数demo6() {
    戻る （
        <>
            <div className="flex">
                <div className="item" style={{flexBasis: 100, flexGrow: 1, marginRight: 10}}>1</div>
                <div className="item" style={{flexBasis: 150, flexGrow: 2, flexShrink: 2 }}>2</div>
            </div>
            <スタイルjsx>{`
                .flex {
                    ディスプレイ: フレックス;
                    幅: 200ピクセル;
                    アウトライン: 1px 破線赤;
                }
                。アイテム {
                    パディング: 10px;
                    境界線: 10px 実線 #666666;
                    ボックスのサイズ: 境界線ボックス;
                }
            ` </スタイル>
        </>
    ）
}

分析：

残りの空き容量を計算する

  • フレックスコンテナの主軸サイズ = 200px
  • 要素 1 の希望サイズ = 100px(flex-basis) + 10px(margin-right) = 110px
  • 要素2の希望サイズ = 150px (flex-basis) = 150px
  • 残りの空きスペース = 200px - 110px - 150px = -60px、つまり、マイナスの残りスペースがあります。
  • 分配される残りの負のスペース = -60px * Min(1, 1 + 2) = -60px

各フレックスサブ要素の縮小サイズを計算する

  • SUM_A = 60ピクセル * 1 + 110ピクセル * 2 = 280ピクセル
  • 注意: 現時点では、flex-basis は flex-shrink に直接乗算されません。基本的に、flex 子要素のコンテンツ四角形の幅は flex-shrink で乗算されます。
  • 要素 1 の実際の縮小サイズ = 60px * 60px * 1 / 280px = 12.86px、つまり最終的な幅 = 60px - 12.86px = 47.14px (パディングと境界線を除く)
  • 要素 2 の実際の成長サイズ = 60px * 110px * 2 / 280px = 47.14px、つまり最終的な幅 = 110px - 47.14px = 62.86px (パディングと境界線を除く)

4.5 Demo5はmin-widthと競合する

この例では次の点に注意してください。

要素1のmin-width=60px

関数demo7() {
    戻る （
        <>
            <div className="flex">
                <div className="item" style={{flexBasis: 100, flexShrink: 2, marginRight: 10, minWidth: 60}}>1</div>
                <div className="item" style={{flexBasis: 150, flexShrink: 2 }}>2</div>
                <div className="item" style={{flexBasis: 100, flexShrink: 1 }}>3</div>
            </div>
            <スタイルjsx>{`
                .flex {
                    ディスプレイ: フレックス;
                    幅: 300ピクセル;
                    アウトライン: 1px 破線赤;
                }
                。アイテム {
                    パディング: 10px;
                    境界線: 10px 実線 #666666;
                }
            ` </スタイル>
        </>
    ）
}

分析：

残りの空き容量を計算する

  • フレックスコンテナの主軸サイズ = 300px
  • 要素 1 の希望サイズ = 100px(flex-basis) + 20px(padding-left/right) + 20px(border-left/right) + 10px(margin-right) = 150px
  • 要素 2 の希望サイズ = 150px (flex-basis) + 20px (padding-left/right) + 20px (border-left/right) = 190px
  • 要素 3 の希望サイズ = 100px (flex-basis) + 20px (padding-left/right) + 20px (border-left/right) = 140px
  • 残りの空きスペース = 300px - 150px - 190px - 140px = -180px、つまり、マイナスの残りスペースがあります。
  • 分配される残りの負のスペース = -180px * Min(1, 1 + 2 + 2) = -180px

各フレックスサブ要素の縮小サイズを計算する

  • SUM_A = 100ピクセル * 2 + 150ピクセル * 2 + 100ピクセル * 1 = 400ピクセル
  • 要素1の実際の縮小サイズ = 180px（負の残りのスペースの絶対値）100px 2 / 700px = 51.43px、
  • このように、要素 1 のサイズは最大で 100px - 51.43px = 48.57px となり、これは min-width=60px よりも小さくなります。つまり、最終的な幅は 60px になります。つまり、要素 1 に割り当てられた税負担は、他の兄弟によって共有される必要があります。

要素 2 と要素 3 は空き領域を残すために再割り当てされます。つまり、手順 1 に戻って再計算することになります。

  • フレックスコンテナの主軸サイズ = 300px - 要素 1 が占めるサイズ (60px + 20px + 20px + 10px) = 190px
  • 残りのスペース = 190px - 190px - 140px = -140px、つまり、要素 2 と 3 を合計で 140px 削減する必要があります。
  • SUM_A = 150ピクセル * 2 + 100ピクセル * 1 = 400ピクセル
  • 要素2の縮小サイズ = 140px * 150 * 2 / 400px = 105px、つまり最終的な幅 = 150px - 105px = 45px
  • 要素3の縮小サイズ = 140px * 100 / 400px = 35px、つまり最終的な幅 = 100px - 35px = 65px

4.6 まとめ

  • 縮小ルールはもう少し複雑ですが、それにはいくつかの理由があり、主に小さな要素が急速に縮小して負の幅になるのを防ぐためです。
  • フレックス要素が伸縮する場合、伸縮するのはコンテンツの四角形のみです。余白、境界線、パディングは伸縮しないため、伸縮計算式（伸縮計算式など）には含まれません。
  • min プロパティの競合が発生した場合、つまり要素を縮小できなくなった場合、残りのスペースは次の flex 子要素によって再分配されます。 min 属性で最小サイズが指定されている場合を除き、すべての要素には最小サイズがあります。

参照する

css-tricks: Flexbox の完全ガイド
仕様
フレックスボックスを理解する

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  ウェブデザイナーは3つの側面からウェブページを最適化する必要がある

>>:  MySQLの保存時間の不一致の問題を解決する

推薦する

CSS3を使用してフォントカラーグラデーションを実装する

Animation.css を使うと公式サイトのフォントがだんだんと変わっていくのが分かりました。c...

SQL文のパフォーマンスを分析するための標準的な要約

この記事では、explain を使用して SQL ステートメントを分析する方法を紹介します。実際、イ...

Dockerでイメージ情報を表示する方法

この記事では、Dockerでイメージ情報を表示する方法を学ぶ必要があります。 1. imagesコマ...

メタタグのビューポートを使用して画面の CSS を定義する

<meta name="viewport" content="w...

VueでJSXを使用する方法

JSXとは何かJSX は Javascript の構文拡張であり、JSX = Javascript ...

ネイティブ js カスタム右クリック メニュー

この記事の例では、参考のためにjsカスタム右クリックメニューの具体的なコードを共有しています。具体的...

MySQL 8.0.22 のインストールと設定方法のグラフィックチュートリアル

この記事ではMySQL 8.0.22のインストールと設定について記録します。具体的な内容は以下のとお...

入力ボックスのコンテンツプロンプトと非表示機能を実装する JavaScript

入力ボックスが小さい場合、内容を入力した後に、入力内容が拡大されたプロンプト ボックスを表示したいこ...

Vue シンプル登録ページ + 確認コード送信機能の実装例

目次1. エフェクト表示2. 検証コードとメールプッシュ管理の強化（後述のブログを参照） 3. 一般...

Vue 関数のアンチシェイクとスロットリングの正しい使用方法

序文1. デバウンス: 高頻度イベントがトリガーされた後、関数は n 秒以内に 1 回だけ実行されま...

MySQL でよく使われる型変換関数の概要 (推奨)

1. Concat関数。よく使用される接続文字列: concat 関数。たとえば、SQLクエリ条件...

Linux viコマンドの知識ポイントと使い方のまとめ

Linux viコマンドの詳しい説明vi エディタは、すべての Unix および Linux システ...

WeChatミニプログラム抽選コンポーネントの使い方

WeChatコンポーネントの形式で提供されます。コンポーネント内部ではasync/awaitが使用さ...

Docker のタイムゾーンの問題とデータ移行の問題

最新のソリューション: -v /usr/share/zoneinfo/Asia/Shanghai:/...

MySQLデータベースの基礎知識

目次1. データベースを理解する1.1 データベースとデータ構造の関係1.2 なぜデータベースが必要...