Flexbox（フレックスボックス）

用語

Flexbox（フレックスボックス）

読み方

フレックスボックス

説明

Flexbox は、CSSで要素を1次元方向（横方向または縦方向）に柔軟に並べるためのレイアウトモジュールです。
従来の float に比べて、要素の整列・余白調整が圧倒的にしやすくなっています。

Flexboxの基本プロパティ（親要素）

プロパティ説明
display: flex;Flexboxを有効化
flex-direction要素を並べる方向
justify-content主軸方向の整列
align-items交差軸方向の整列

子要素側

  • flex-grow：空いたスペースの伸縮
  • flex-shrink：縮む割合
  • flex-basis：要素の基本サイズ

使用例

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

こんなときに使う

  • ボックスを中央寄せしたい
  • 要素の幅を均等にしたい
  • レスポンシブで整然と並べたい

参考サイト・引用元

タイトルとURLをコピーしました