CSS3 フレックスレイアウトを学び、柔軟な Web ページレイアウトを作成する方法を教えてください。-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS3 フレックスレイアウトを学び、柔軟な Web ページレイアウトを作成する方法を教えてください。

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 11, 2023 am 09:01 AM

cssフレックスレイアウトウェブページのレイアウト

CSS3 フレックスレイアウトを学び、柔軟な Web ページレイアウトを作成する方法を教えてください。

CSS3 フレックスレイアウトを学び、柔軟な Web ページレイアウトを作成する方法を学びましょう。

Web デザインでは、レイアウトが重要な役割を果たします。適切なレイアウトを使用すると、Web ページがよりすっきりと美しく見え、さまざまな画面サイズやデバイスに適応できます。 CSS3 のフレックスレイアウトは、Web ページレイアウトを作成するための柔軟かつ強力な方法を提供します。この記事では、フレックスレイアウトとは何か、およびそれを使用して柔軟な Web ページレイアウトを作成する方法を紹介します。

1. フレックスレイアウトとは
フレックスレイアウトは、CSS3 で提供される新しいレイアウト方法であり、フレキシブルレイアウトとも呼ばれます。主軸と交差軸の概念に基づいており、コンテナとその内部要素の一連のプロパティを設定することで柔軟なレイアウト効果を実現します。フレックスレイアウトにより、アダプティブ要素、中心揃え、さらにはスペースの分散などの効果を簡単に実現できます。

2. フレックスコンテナとフレックスアイテム
フレックスレイアウトには、フレックスコンテナとフレックスアイテムという 2 つの重要な概念があります。フレックスコンテナは、フレックスアイテムのグループを含む親要素です。この親要素の属性と値によって、子要素のレイアウト方法が決まります。 Flex アイテムは、Flex コンテナーに直接含まれる子要素です。

3. フレックスコンテナのプロパティ

display: flex
これは、フレックスレイアウトを使用するための最初のステップです。コンテナの表示プロパティを flex に設定するだけです。フレックスを有効にします。レイアウト。コンテナ内の要素が行に配置され、デフォルトでは要素は HTML に表示される順序で並べ替えられます。
flex-direction
このプロパティは、コンテナ内での要素の配置方法を決定します。次のオプション値があります:
row: 水平方向、左から右に配置 (デフォルト値)
row-reverse: 水平方向、右から左に配置
column: 垂直方向、上から下に配置
column-reverse: 垂直方向、下から上に配置
justify-content
この属性は、要素の位置を決定します。主軸のアライメントをオンにします。次のオプション値があります:
flex-start: 主軸の開始位置の近くに位置合わせ (デフォルト値)
flex-end: 主軸の終了位置の近くに位置合わせaxis
center : 中央揃え
space-between: 最初と最後の要素がコンテナの両側に近くなるように、主軸上のスペースを均等に分割します
space -around: 各要素と最初と最後の要素の間の主軸上のスペースを均等に分割します。コンテナからの等しい距離です。
この属性は、交差軸上の要素の配置を決定します。。次のオプションの値があります。
flex-end: 交差軸の終了位置に近い位置合わせ
baseline: 要素のベースラインに従って位置合わせ
stretch: 要素を引き伸ばして軸の交差スペースを埋める

4. フレックス項目のプロパティ

このプロパティは、残りのスペースにおけるフレキシブル項目の拡大縮小率を決定します。親コンテナに余分なスペースがある場合、各 flex 項目の flex-grow プロパティの値によって、割り当てられる割合が決まります。デフォルト値は 0 で、スケーリングを行わないことを意味します。
このプロパティは、スペースが不十分な場合のフレキシブル項目の収縮率を決定します。親コンテナーにすべてのアイテムを収容するのに十分なスペースがない場合、各フレックスアイテムの flex-shrink プロパティの値によって、アイテムが縮小する割合が決まります。デフォルト値は 1 で、これは均等な比例収縮を意味します。
このプロパティは、主軸方向のフレキシブル項目の初期サイズを決定します。特定の値 (ピクセルなど) またはパーセンテージに設定できます。デフォルト値は auto で、プロジェクトの内容に基づいてサイズが自動的に割り当てられます。
このプロパティは、交差軸上の単一項目の配置を決定します。コンテナーの align-items プロパティをオーバーライドできます。オプションの値は align-items と同じです。

5. 柔軟な Web ページレイアウトの例

以下は、フレックスレイアウトを使用して作成された Web ページレイアウトの例です:

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .header {
            width: 100%;
            height: 100px;
            background-color: #ccc;
        }

        .main {
            flex: 1;
            width: 100%;
            background-color: #eaeaea;
        }

        .sidebar {
            width: 200px;
            background-color: #ccc;
        }

        .content {
            flex-grow: 1;
            padding: 20px;
        }

        .footer {
            width: 100%;
            height: 50px;
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">Header</div>
        <div class="main">
            <div class="sidebar">Sidebar</div>
            <div class="content">Content</div>
        </div>
        <div class="footer">Footer</div>
    </div>
</body>
</html>

上記のコードを使用した、柔軟な Web ページレイアウト頭部と底部の高さを固定し、中央部分をサイドバーとコンテンツエリアに分割し、コンテンツの高さに応じて中央部分を柔軟に拡張することが可能です。各要素の flex 属性とコンテナの配置を設定することで、さまざまな画面サイズに適応する Web ページレイアウトを実装できます。

6. 概要

CSS3 のフレックスレイアウトは、Web ページレイアウトを作成するための柔軟かつ強力な方法を提供します。フレックスコンテナとフレックスアイテムのさまざまなプロパティを柔軟に使用することで、要素の適応、中心揃え、さらにはスペースの分配などの効果を簡単に実現できます。フレックスレイアウトを学習してマスターすることで、さまざまな画面サイズやデバイスに合わせて、より柔軟で美しく、適応性のある Web ページレイアウトを作成できます。

以上がCSS3 フレックスレイアウトを学び、柔軟な Web ページレイアウトを作成する方法を教えてください。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

非常に多くの色のリンクApr 13, 2025 am 11:36 AM

最近の色に関するツール、記事、リソースの実行がありました。あなたの楽しみのためにここにそれらを丸くすることで、私がいくつかのタブを閉じてもらいましょう。

FlexBoxでの自動マージンの仕組みApr 13, 2025 am 11:35 AM

ロビンは以前にこれをカバーしたことがありますが、私は過去数週間でそれについての混乱を聞いて、他の人がそれを説明することに刺されたのを見ました、そして私は望んでいました

動く虹色の下線Apr 13, 2025 am 11:27 AM

サンドイッチサイトのデザインが大好きです。多くの美しい特徴の中には、これらの見出しがあり、レインボーの下線が下線を描いて、スクロールするときに動きます。そうではありません

新年、新しい仕事？グリッド駆動の履歴書を作成しましょう！Apr 13, 2025 am 11:26 AM

多くの人気のある履歴書設計は、グリッド形状にセクションを配置することにより、利用可能なページスペースを最大限に活用しています。 CSSグリッドを使用して、レイアウトを作成しましょう

リロードしすぎるという習慣からユーザーを分解する1つの方法Apr 13, 2025 am 11:25 AM

ページのリロードは何かです。ページが反応しないと思われるとき、または新しいコンテンツが利用可能であると信じるときにページを更新することもあります。時々私たちはただ怒っています

Reactを使用したドメイン駆動型のデザインApr 13, 2025 am 11:22 AM

Reactの世界でフロントエンドアプリケーションを整理する方法に関するガイダンスはほとんどありません。（「正しいと感じる」までファイルを移動するだけです笑）。真実

非アクティブユーザーの検出Apr 13, 2025 am 11:08 AM

ほとんどの場合、ユーザーがアプリケーションに積極的に関与しているのか、一時的に非アクティブであるかを本当に気にしません。非アクティブ、意味、おそらく彼ら

Wufoo ZapierApr 13, 2025 am 11:02 AM

Wufooは常に統合に優れています。キャンペーンモニター、MailChimp、TypeKitなどの特定のアプリと統合されていますが、

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、