フレキシブルボックスレイアウトフレックスとは何ですか?-CSSの知識-php.cn

ホームページ

毎日のプログラミング

CSSの知識

フレキシブルボックスレイアウトフレックスとは何ですか?

藏色散人

Nov 12, 2018 pm 05:32 PM

この記事では、cssフレックスボックスレイアウトの基礎知識を中心に簡単に紹介します。

前の記事では、css Grid グリッドレイアウトを紹介しました。このセクションでは、引き続き css の Flex Elastic レイアウトを紹介します。

flex elastic Layout は、CSS3 の効果的なレイアウト方法です。

フレックスボックスレイアウトモデル (フレックスボックス) を導入する目的は、コンテナ内のアイテムの空きスペースをより効率的に配置、整列、割り当てする方法を提供することです。フレックスボックスレイアウトモデルは、コンテナ内の項目のサイズが不明な場合や動的に変化する場合でも、正常に動作します。

または、ページレイアウトをさまざまな画面サイズやさまざまな表示デバイスに適応させる必要がある場合に、予測どおりに動作する要素。 float を使用しないため、フレックスコンテナーの端がコンテンツの端と一緒に崩れることはありません。

それでは、フレックスコンテナとは何でしょうか?

Flex レイアウトを使用する要素は Flex コンテナ (コンテナ) と呼ばれ、「コンテナ」と呼ばれます。

推奨フレックスレイアウトビデオチュートリアル: "2018 最新 5 フレックスフレキシブルレイアウトビデオチュートリアル"

flex elasticレイアウト簡単なコード例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex布局</title>
</head>
<style>
 .box1{
        background: #1F376D;
 height: 500px;
 width: 500px;
 }
    .box2{
        background: #745A74;
 height: 500px;
 width: 500px;
 }
    .box3{
        background: #26A3CF;
 height: 500px;
 width: 500px;
 }
    .box4{
        background: #CCCC66;
 height: 500px;
 width: 500px;
 }
</style>
<body style="display: flex; flex-direction: row">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box3"></div>
<div class="box1"></div>

</body>
</html>

ログイン後にコピー

効果は次のとおりです:

フレキシブルボックスレイアウトフレックスとは何ですか?