フレックスレイアウトの長所と短所は何ですか-CSSチュートリアル-php.cn

フレックスレイアウトの長所と短所は何ですか

coldplay.xixi

リリース： 2021-01-28 18:00:51

オリジナル

11467 人が閲覧しました

フレックスレイアウトの長所と短所は次のとおりです: 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>

ログイン後にコピー

効果は次のとおりです:

フレックスレイアウトの長所と短所は何ですか