【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>

上寄せ×左寄せ

CSS

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

上寄せ中×中央寄せ

CSS

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

上寄せ×右寄せ

CSS

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

中央寄せ×左寄せ

CSS

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

中央寄せ×中央寄せ

CSS

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

中央寄せ×右寄せ

CSS

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

下寄せ×左寄せ

CSS

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

下寄せ×中央寄せ

CSS

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

下寄せ×右寄せ

CSS

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