検索

ホームページ  >  に質問  >  本文

要素の配置にフレックス ボックスの代わりにpositionを使用することを検討する必要があるのはどのような場合ですか?

<p><br /></p> <pre class="brush:php;toolbar:false;"><!DOCTYPE html> <html lang="ja"> <頭> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=device-width、initial-scale=1.0"> <title>ドキュメント</title> <スタイル> #dn { 幅: 400ピクセル; 高さ: 400ピクセル; パディング: 20px; ボーダー: 2px ソリッド #cd1313; } .box1 { 幅: 100%; 高さ: 100%; ディスプレイ: フレックス; コンテンツの位置揃え: 中央; 整列項目: 中央; テキスト整列: 中央; フォントの太さ: 太字; 色: 白; フォントサイズ: 24px; 背景色: #000000; } </スタイル> </head> <本体> <div id="dn" class="boxn"> Lorem、ipsum dolor は、エリートを構築するために座っています。 Architecto ducimus repudiandae inventore iste porro specificio necessitatibus incidunt accusamus facilis obcaecati!やあ、ナメン <div id="d1" class="box1"> 子供 </div> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque deleniti quibusdam quod praesentium、soluta harum alias aperiam hic voluptatum natus? </div> </ボディ> </html></pre> <p>ボックス 1 を拡張ボックスとして表示しました。これは、私が部屋の近くのアイテム (子) に対して水平になることを許可するだけでなく、交差点軸に沿ってボックス 1 に垂直に移動することも許可します。文字?那么後結果会是何么呢?是故我们文本上应用位置吗?,如果项目是一跨度框,我可以在其中应用位置吗?如果是,那么它不生问题,我们必用使用</p>この問題はさらに長くなりますが、私にとっては重要です。
P粉914731066P粉914731066496日前645

全員に返信(1)返信します

  • P粉311464935

    P粉3114649352023-07-24 11:11:40

    位置を使用する場合、オブジェクトを配置するためにオブジェクトの両側に何ピクセル必要か定義する必要があります。これはあまり柔軟性がありません。さまざまな画面サイズで各オブジェクトに必要なピクセル数を測定/計算/試行する必要があることを想像してください。それは可能ですが、多くの時間と労力がかかります。したがって、フレックスボックスは実装が簡単です。

    フレックスボックスを使用すると、コンテンツの一貫性が高まります。つまり、オブジェクトの各辺に必要なピクセル数を自動的に計算します。これにより、的を外れた計算が行われる可能性が減ります。したがって、すべての要素は同じように配置されます。


    返事
    0
  • キャンセル返事