▲TOPへ戻る

【CSS】flexboxで上下左右、中央の配置の方法

以下の図のように、display:flex;のボックス内での上下左右、中央の配置の仕方について説明します。

Top Left
Top Center
Top Right
Center Left
Center Center
Center Right
Bottom Left
Bottom Center
Bottom Right

justify-content 左右の配置

justify-content:flex-start 左寄せ
justify-content:center 中央寄せ
justify-content:flex-end 右寄せ

align-items 上下の配置

align-items:flex-start 上寄せ
jalign-items:center 中央寄せ
align-items:flex-end 下寄せ

共通のHTML

HTML
 <div class="box"></div>

上寄せ×左寄せ

Top Left
CSS
 .top-left{
     align-items: flex-start;       //上寄せ
     justify-content: flex-start;   //左寄せ
  }

上寄せ中×中央寄せ

Top Center
CSS
 .top-center{
     align-items: flex-start;       //上寄せ
     justify-content: center;       //中央寄せ
  }

上寄せ×右寄せ

Top Right
CSS
 .top-right{
     align-items: flex-start;       //上寄せ
     justify-content: flex-end;     //右寄せ
  }

中央寄せ×左寄せ

Center Left
CSS
 .center-left{
     align-items: center;           //中央寄せ
     justify-content: flex-start;   //左寄せ
  }

中央寄せ×中央寄せ

Center Center
CSS
 .center-center{
     align-items: center;           //中央寄せ
     justify-content: center;       //中央寄せ
  }

中央寄せ×右寄せ

Center Right
CSS
 .center-right{
     align-items: center;           //中央寄せ
     justify-content: flex-end;     //右寄せ
  }

下寄せ×左寄せ

Bottom Left
CSS
 .bottom-left{
     align-items: flex-end;         //下寄せ
     justify-content: flex-start;   //左寄せ
  }

下寄せ×中央寄せ

Bottom Center
CSS
 .bottom-center{
     align-items: flex-end;         //下寄せ
     justify-content: center;       //中央寄せ
  }

下寄せ×右寄せ

Bottom Right
CSS
 .bottom-right{
     align-items: flex-end;         //下寄せ
     justify-content: flex-end;     //右寄せ
  }
point

align-items:  は上下の配置

justify-content:   は左右の配置

要素にflex-direction: column;を指定すると方向が変わるので注意!

profile

gaoさん

パソコン好きなガオ

コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。<