CSS

Flexboxで簡単レイアウト！justify-content・align-itemsを完全理解

Webページを作るとき、「要素を横に並べたい！」「中央に揃えたい！」と思ったことはありませんか？

従来のCSSでは、float や position を駆使してレイアウトを組んでいましたが、Flexbox を使えば簡単に実現できます！

Flexboxをマスターすると、Webページのレイアウトがシンプルなコードで直感的に調整 できるようになります。

この記事では、Flexboxの基本から、レイアウト調整に必須のプロパティを丁寧に解説していきます！

Flexboxとは？

Flexbox（フレックスボックス） は、要素の配置を簡単に調整できるレイアウトの仕組みです。

通常のHTMLでは、要素は上から順番に並びますが、Flexboxを使うと横並び にしたり、中央揃え にしたり、自由自在に配置 できます。

基本の書き方

まず、Flexboxを適用するには、親要素（コンテナ）に display: flex; を指定します。

試してみよう！

次のコードを index.html と style.css にコピペして試してみましょう！

1. HTMLファイル（index.html）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Flexboxの基本</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Flexboxの基本を学ぼう！</h1>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>
</html>

2. CSSファイル（style.css）

.container {
    display: flex;
    border: 2px solid black;
    padding: 10px;
}

.item {
    width: 50px;
    height: 50px;
    background-color: lightblue;
    margin: 5px;
    text-align: center;
    line-height: 50px;
    font-weight: bold;
}

これを適用すると、要素が横並び になります！

┌―――――――――――――――┐
|  1   2   3  |
└―――――――――――――――┘

justify-content（横方向の揃え方）

justify-content を使うと、要素の**横方向（主軸）**の配置を変更できます。

使える値

  • flex-start（左揃え・デフォルト）
  • flex-end（右揃え）
  • center（中央揃え）
  • space-between（両端揃え）
  • space-around（均等な間隔）

コード例

.container {
    display: flex;
    justify-content: space-between;
}

すると、要素が**両端に配置され、均等な間隔** になります。

┌―――――――――――――――――――――――┐
| 1         2         3 |
└―――――――――――――――――――――――┘

align-items（縦方向の揃え方）

align-items は、要素の**縦方向（交差軸）**の配置を変更できます。

使える値

  • flex-start（上揃え）
  • flex-end（下揃え）
  • center（中央揃え）
  • stretch（高さを均等にする）

コード例

.container {
    display: flex;
    align-items: center;
    height: 200px;
}

すると、要素が**縦方向の中央** に配置されます。

┌―――――――――――――――――――――――――――┐
|         1   2   3         |
└―――――――――――――――――――――――――――┘

問題集

Q1. Flexboxを適用するために必要なプロパティは？

  1. display: grid;
  2. display: block;
  3. display: flex;

Q2. 要素を横並びではなく縦並びにしたい場合、どのプロパティを使う？

  1. justify-content
  2. flex-direction
  3. align-items

✅ 答え: Q1→3, Q2→2

これで、お試しコード＋justify-content・align-itemsの視覚表現がわかりやすくなりました！
最終チェックをお願いします！

まとめ

  • display: flex; でFlexboxを適用する
  • justify-content で横方向の揃え方を変更
  • align-items で縦方向の揃え方を変更
  • 実際に試して、レイアウトの動きを確認しよう！

シェア！

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

RECOMMENDこちらの記事も人気です。