ホームページ > 記事 > ウェブフロントエンド > フレックスレイアウトの長所と短所は何ですか
フレックスレイアウトの長所と短所は何ですか
- coldplay.xixiオリジナル
- 2021-01-25 17:29:1211364ブラウズ
フレックス レイアウトの長所と短所は次のとおりです: 1. フレックス レイアウトの利点は、使いやすく、フレックス ルールに従って特定のレイアウト効果を簡単に達成できることです。2. 欠点は、ブラウザの互換性は比較的低く、ie9 以降とのみ互換性があります。
この記事の動作環境: Acer S40-51、HBuilderX.3.0.5&&css3 版、Windows10 Home 中国語版
推奨: css ビデオ チュートリアル
フレックス レイアウトの長所と短所は次のとおりです。
CSS3 フレキシブル ボックス (フレキシブル ボックスまたはフレックスボックス) は、タイプの 1 つです。ページが必要なときに調整する必要があるレイアウト。さまざまな画面サイズやデバイス タイプにわたって要素が適切に動作することを保証するレイアウト方法。
フレキシブル ボックス レイアウト モデルを導入する目的は、コンテナ内のサブ要素に空きスペースを配置、整列、割り当てるためのより効率的な方法を提供することです。
css3 によって導入されたフレックス レイアウトの長所と短所:
利点は、使いやすく、必要に応じて特定のレイアウト効果を達成しやすいことです。ルールを柔軟にすること。
欠点は、ブラウザの互換性が比較的低く、ie9 以降としか互換性がないことです。
css3 で導入されたフレックス レイアウトの紹介:
フレキシブル ボックスは、フレキシブル コンテナ (Flex コンテナ) とフレキシブル サブコンテナで構成されます。要素 (フレックス項目)。フレックス コンテナは、表示プロパティを flex または inline-flex に設定することによって、フレックス コンテナとして定義されます。フレックス コンテナには 1 つ以上のフレックス子要素が含まれます。
注: フレキシブル コンテナの外側とフレキシブル サブ要素の内側は通常どおりレンダリングされます。フレックス ボックスは、フレックス 子要素がフレックス コンテナ内でどのようにレイアウトされるかを定義するだけです。フレックス子要素は通常、フレックス ボックス内に 1 行に表示されます。デフォルトでは、コンテナーごとに 1 行のみが存在します。
#例:
##<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
</body>
</html>効果は次のとおりです:
プログラミングについてさらに詳しく知りたい場合は、php training 列に注目してください。 ！
以上がフレックスレイアウトの長所と短所は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。