简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
要素の配置にフレックス ボックスの代わりにpositionを使用することを検討する必要があるのはどのような場合ですか?
P粉914731066
P粉914731066 2023-07-23 17:48:48
0
1
600
<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粉914731066
P粉914731066

全員に返信(1)
P粉311464935
P粉3114649352023-07-24 11:11:40 1棟

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

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


いいねを押す +0
返信を追加
人気のトピック
詳細>
人気の記事
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！