🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

CSSテンプレート：display: flex;

📝 使用用途

このテンプレートは、ボックスや要素を横並びで配置したいときに使用します。カード型レイアウトやボタンの並列配置、レスポンシブなデザインにも役立ちます。

📘 解説

display: flex; を親要素に指定することで、子要素が自動的に横並びになります。gap プロパティで間隔も調整可能です。ここでは .flex-container を親に、.flex-box を子要素にしています。

✅ デモ

Box 1
Box 2
Box 3

📄 コード（部分）

<style>
  .flex-container {
    display: flex;
    gap: 1rem;
  }
  .flex-box {
    flex: 1;
    padding: 1rem;
    background: #f2f2f2;
    border: 1px solid #ccc;
    text-align: center;
  }
</style>

<div class="flex-container">
  <div class="flex-box">Box 1</div>
  <div class="flex-box">Box 2</div>
  <div class="flex-box">Box 3</div>
</div>

📦 コード（HTMLまるごと）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Flex 横並びデモ</title>
  <style>
    .flex-container {
      display: flex;
      gap: 1rem;
    }
    .flex-box {
      flex: 1;
      padding: 1rem;
      background: #f2f2f2;
      border: 1px solid #ccc;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="flex-container">
    <div class="flex-box">Box 1</div>
    <div class="flex-box">Box 2</div>
    <div class="flex-box">Box 3</div>
  </div>
</body>
</html>
コピーしました！

🧩 Flexboxレイアウトの実践的活用テクニック

display: flexは現代のWebレイアウトにおいて最も強力なCSSプロパティの1つです。直感的な要素配置が可能で、レスポンシブデザインにも最適です。

🎯 基本的な配置テクニック

justify-contentで水平方向の配置を、align-itemsで垂直方向の配置を制御できます。例えば、justify-content: space-betweenを使えば要素を均等に配置し、両端に寄せることが可能です。また、flex-wrap: wrapを追加すると、画面幅が狭くなった時に自動的に折り返します。

✨ 高度なレイアウト調整

子要素のflexプロパティで比率を細かく調整できます。flex: 2とflex: 1を組み合わせると、2:1の比率で要素を配置可能です。また、orderプロパティを使えば、HTMLの構造を変えずに表示順序を変更できます。

📱 レスポンシブ対応のポイント

モバイル表示ではflex-direction: columnに変更すると、縦並びに切り替えられます。メディアクエリと組み合わせることで、デバイスごとに最適なレイアウトを実現可能です。また、gap値も画面幅に応じて調整すると良いでしょう。

Flexboxは強力ですが、過度に複雑なレイアウトにはGridレイアウトの使用を検討しましょう。また、古いブラウザ対応が必要な場合は、display: -webkit-boxなどのベンダープレフィックスを追加する必要があります。

関連テンプレート