Skip to content

CSS Flexbox 弹性レイアウト チートシート

Flexbox (Flexible Box) レイアウト モデルは、コンテナ内のアイテムのサイズが不明であったり動的であったりする場合でも、アイテムを効率的に配置し、スペースを分配する方法を提供します。

コンテナ属性 (Flex Container)

Set on parent: display: flex; or display: inline-flex;

属性 説明 一般的な値
flex-direction 主軸の方向 row, row-reverse, column, column-reverse
flex-wrap 折り返し nowrap, wrap, wrap-reverse
flex-flow 方向と折り返しの省略形 row wrap
justify-content 主軸上の配置方法 flex-start, flex-end, center, space-between, space-around
align-items 交差軸上の配置方法 flex-start, flex-end, center, baseline, stretch
align-content 複数行の交差軸上の配置 flex-start, flex-end, center, space-between, stretch

アイテム属性 (Flex Items)

Set on children:

属性 説明 デフォルト
order 並び順 (値が小さいほど前方) 0
flex-grow 伸長係数 (スペースに余裕がある場合) 0
flex-shrink 収縮係数 (スペースが不足する場合) 1
flex-basis スペース分配前のベースサイズ auto
flex grow, shrink, basis の省略形 0 1 auto
align-self 個別のアイテムに異なる配置を許可する auto

コア概念の図解

  • 主軸 (Main Axis): デフォルトは水平方向、flex-direction で決定されます。
  • 交差軸 (Cross Axis): 主軸に垂直な方向。

シーン例

水平垂直中央揃え 

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

等幅分布 

.item {
  flex: 1; /* 残りのスペースを均等に占める */
}

両端揃え 

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