プログラミング

Flexboxの基本と実践例

Last Updated: 16/04/2025
10 1 minute read

CSS3のFlexboxは、ウェブページのレイアウトを簡単かつ効率的に作成するための強力なツールです。従来の方法では、複雑なレイアウトを作成するために多くのHTMLやCSSのコードが必要でしたが、Flexboxを使用することで、より簡潔で直感的な方法で複雑なレイアウトが実現可能です。本記事では、Flexboxの基本的な概念から実際の使用例に至るまで、詳しく説明します。

Related Articles

1. Flexboxの基本概念

Flexbox（フレックスボックス）は、コンテナ要素内でアイテムを配置する方法を制御するためのCSS3のレイアウトモデルです。主に以下の2つの軸を使ってアイテムを配置します。

  • メイン軸：Flexアイテムが並ぶ方向。通常、横方向（row）または縦方向（column）になります。

  • 交差軸：メイン軸に垂直な方向で、アイテムの配置が行われます。

Flexboxを使用するためには、親要素にdisplay: flexまたはdisplay: inline-flexを指定する必要があります。このプロパティを指定することで、子要素（アイテム）がFlexboxのレイアウトルールに従うようになります。

2. Flexboxを使った基本的なレイアウト例

まず、最も基本的なFlexboxの使用例を紹介します。以下のコードでは、親要素がdisplay: flexを持ち、子要素が横に並ぶレイアウトを作成します。

html
html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexboxの基本例title>
    <style>
        .container {
            display: flex;
            justify-content: space-between;
            background-color: lightblue;
        }
        .item {
            background-color: coral;
            padding: 20px;
            margin: 10px;
            color: white;
            text-align: center;
        }
    style>
head>
<body>
    <div class="container">
        <div class="item">アイテム1div>
        <div class="item">アイテム2div>
        <div class="item">アイテム3div>
    div>
body>
html>

3. 主なFlexboxのプロパティ

3.1 justify-content（メイン軸に沿った配置）

このプロパティは、Flexアイテムをメイン軸に沿って配置する方法を決定します。よく使われる値は以下の通りです。

  • flex-start（デフォルト）：アイテムを左端に配置します（横並びの場合）。

  • flex-end：アイテムを右端に配置します（横並びの場合）。

  • center：アイテムを中央に配置します。

  • space-between：アイテム間に均等にスペースを配置します。

  • space-around：アイテムの周囲に均等にスペースを配置します。

css
.container {
    display: flex;
    justify-content: center; /* 中央に配置 */
}

3.2 align-items（交差軸に沿った配置）

このプロパティは、交差軸（通常は縦方向）に沿ってアイテムを配置する方法を決定します。以下の値があります。

  • flex-start：アイテムを交差軸の開始位置に配置します（上端の場合）。

  • flex-end：アイテムを交差軸の終了位置に配置します（下端の場合）。

  • center：アイテムを交差軸の中央に配置します。

  • stretch（デフォルト）：アイテムの高さまたは幅を交差軸全体に引き伸ばします。

css
.container {
    display: flex;
    align-items: center; /* 中央に配置 */
}

3.3 flex-wrap（アイテムの折り返し）

デフォルトでは、Flexboxはアイテムを1行に収めようとしますが、flex-wrapを使うことで、アイテムを複数行に折り返すことができます。

  • nowrap（デフォルト）：折り返しなし。

  • wrap：アイテムを必要に応じて折り返します。

  • wrap-reverse：アイテムを逆順に折り返します。

css
.container {
    display: flex;
    flex-wrap: wrap; /* アイテムを折り返す */
}

4. Flexboxの実用的な使用例

4.1 ナビゲーションバーの作成

Flexboxを使用すると、水平なナビゲーションバーを簡単に作成できます。アイテムを横並びにし、均等にスペースを取ることができます。

html
html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ナビゲーションバーの例title>
    <style>
        .navbar {
            display: flex;
            justify-content: space-around;
            background-color: #333;
            padding: 10px 0;
        }
        .nav-item {
            color: white;
            text-decoration: none;
            padding: 10px 20px;
        }
        .nav-item:hover {
            background-color: #575757;
        }
    style>
head>
<body>
    <div class="navbar">
        <a href="#" class="nav-item">ホームa>
        <a href="#" class="nav-item">サービスa>
        <a href="#" class="nav-item">お問い合わせa>
    div>
body>
html>

4.2 グリッドの作成

Flexboxは、レスポンシブなグリッドレイアウトを作成するためにも非常に便利です。以下の例では、3つのカラムを持つレイアウトを作成します。

html
html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>グリッドレイアウトの例title>
    <style>
        .grid-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }
        .grid-item {
            background-color: lightcoral;
            padding: 20px;
            flex: 1 1 30%; /* 幅を30%に設定 */
            box-sizing: border-box;
            text-align: center;
        }
    style>
head>
<body>
    <div class="grid-container">
        <div class="grid-item">アイテム1div>
        <div class="grid-item">アイテム2div>
        <div class="grid-item">アイテム3div>
    div>
body>
html>

5. Flexboxを使ったレスポンシブデザイン

Flexboxは、レスポンシブデザインを簡単に実現するために非常に有効です。メディアクエリを使って、画面の幅に応じてレイアウトを変更できます。

css
@media (max-width: 768px) {
    .container {
        flex-direction: column; /* スマホでは縦並びに変更 */
    }
}

このように、Flexboxは非常に強力で柔軟なレイアウトツールであり、さまざまなレイアウトを簡単に作成することができます。これを使用することで、より効率的にレスポンシブでモダンなウェブデザインを実現できます。

まとめ

Flexboxは、レイアウトを簡単に構築できる強力なツールです。基本的な概念を理解し、実際のプロジェクトで活用することで、コードがシンプルで効率的になります。今回紹介した例をもとに、Flexboxを駆使して、柔軟で美しいデザインを作成してみてください。

Last Updated: 16/04/2025
10 1 minute read
Back to top button