初心者向けの Flexbox を使用したシンプルなレスポンシブレイアウトの構築-CSSチュートリアル-php.cn

初心者向けの Flexbox を使用したシンプルなレスポンシブレイアウトの構築

Barbara Streisand

リリース： 2024-10-24 08:10:02

オリジナル

1040 人が閲覧しました

Building a Simple Responsive Layout with Flexbox for Beginners

レスポンシブレイアウトの作成は、今日の Web 開発において重要なスキルです。さまざまなデバイスから Web サイトにアクセスするユーザーが増えているため、レイアウトをさまざまな画面サイズにシームレスに適応させる方法を理解することが不可欠です。この記事では、CSS Flexbox を使用してシンプルなレスポンシブレイアウトを構築する方法を説明します。始めましょう!

フレックスボックスとは何ですか?

Flexbox は、「Flexible Box Layout」の略で、複雑なレイアウトを簡単に設計できる 1 次元レイアウトモデルです。これは、コンテナ内のアイテム間でスペースを配置および分配する効率的な方法を提供するため、レスポンシブデザインに最適です。

フレックスボックスレイアウトの基本構造

コードに入る前に、レイアウトの基本的な HTML 構造を作成しましょう。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Flexbox Layout</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="header">Header</header>
    <div class="container">
        <aside class="sidebar">Sidebar</aside>
        <main class="main">Main Content</main>
        <aside class="sidebar">Sidebar</aside>
    </div>
    <footer class="footer">Footer</footer>
</body>
</html>

ログイン後にコピー

CSS スタイル

次に、CSS スタイルをいくつか追加して、Flexbox を使用してこのレイアウトをレスポンシブにしましょう。 styles.css ファイルを作成し、次のスタイルを追加します:

* {
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.header, .footer {
    background-color: #4CAF50;
    color: white;
    text-align: center;
    padding: 1em 0;
}

.container {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap onto the next line */
}

.sidebar {
    background-color: #f4f4f4;
    padding: 15px;
    flex: 1; /* Flex-grow, Flex-shrink, Flex-basis */
    min-width: 200px; /* Minimum width of sidebar */
}

.main {
    background-color: #fff;
    padding: 15px;
    flex: 2; /* Main content takes up more space */
    min-width: 300px; /* Minimum width of main content */
}

@media (max-width: 600px) {
    .container {
        flex-direction: column; /* Stack items vertically on small screens */
    }
}

ログイン後にコピー

CSSの説明

ボックスサイズ: ボックスサイズ: border-box;このルールにより、要素の幅と高さの合計にパディングとボーダーが確実に含まれるようになり、要素のサイズを簡単に設定できるようになります。
フレックスコンテナ: .container クラスは、display: flex; を持つフレックスコンテナとして定義されます。フレックスラップ: ラップ;プロパティを使用すると、十分なスペースがない場合に項目を次の行に折り返すことができます。
フレックス項目: 各 .sidebar セクションと .main セクションはフレックス項目として定義されます。 flex プロパティを使用すると、項目間のスペース配分を制御できます。この場合、メインコンテンツはサイドバーに比べて 2 倍のスペースを占めます。
メディアクエリ: @media ルールを使用すると、画面サイズに基づいてさまざまなスタイルを適用できます。ここで、画面幅が 600 ピクセル以下の場合、フレックス方向は列に変更され、アイテムが垂直方向に積み重ねられます。