CSS Flexbox（フレックスボックス）について

Flexboxとは？

Flexbox（フレックスボックス）とは、CSSで要素の配置や整列、並び方を柔軟にコントロールできるレイアウト機能です。
特に横並び・縦並び・中央揃え・等間隔配置などに便利です。

基本構成

• 親要素に display: flex; を指定
• 子要素に対して並び方や伸縮の指定が可能

基本構文

<style>
  .container {
    display: flex;
  }
</style>

<div class="container">
  <div>項目1</div>
  <div>項目2</div>
  <div>項目3</div>
</div>
  

主なプロパティ（親要素に指定）

• flex-direction：並ぶ方向（row / column / row-reverse / column-reverse）
• justify-content：横方向の配置（start / center / space-betweenなど）
• align-items：縦方向の揃え方（stretch / center / flex-startなど）
• flex-wrap：折り返しの指定（nowrap / wrap / wrap-reverse）
• gap：要素間の隙間（marginの代替として使用）

主なプロパティ（子要素に指定）

• flex：伸縮比（flex: 1; など）
• align-self：個別の縦揃え
• order：並び順の指定

使用例：等幅で3列に並べる

.container {
  display: flex;
}
.container div {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
}
  

使用例：中央揃え

.center-box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  background-color: #f0f0f0;
}
  

注意点

• Flexboxは親子関係で成り立つ（親がflex、子がその対象）
• 複雑なグリッド状レイアウトにはCSS Gridを使う方が適している場合もある
• 古いブラウザでは一部非対応があるため注意（現在はほぼサポート済）

まとめ

• Flexboxは要素の並びや整列を柔軟に制御するCSS機能
• display: flex;を親要素に指定
• 中央揃え、等間隔配置、折り返しなどが簡単にできる
• レスポンシブデザインにも非常に便利