Flex

Flex boxに使用するCSS

詳しい導入事例は導入方法を参照してください。

  • DEMO
  • flex 1
  • flex 2
  • flex 3
  • flex 4
  • flex 5

使い方

+-.center-+の単体クラスでflexレイアウトを使用した縦横センタリングも可能。

  • CSS
.flex {display: flex;}
.flex.jc {justify-content: center;}
.flex.js {justify-content: flex-start;}
.flex.je {justify-content: flex-end;}
.flex.ja {justify-content: space-around;}
.flex.jb {justify-content: space-between;}
.flex.ac {align-items: center;}
.flex.as {align-items: flex-start;}
.flex.ae {align-items: flex-end;}
.flex.ab {align-items: baseline;}
.flex.ww {flex-wrap: wrap;}
.flex.wn {flex-wrap: nowrap;}
.flex.dc {flex-direction: column;}
.flex.dr {flex-direction: row;}

@media screen and (max-width: 768px) {
  .flex.XS_jc {justify-content: center;}
  .flex.XS_js {justify-content: flex-start;}
  .flex.XS_je {justify-content: flex-end;}
  .flex.XS_ja {justify-content: space-around;}
  .flex.XS_jb {justify-content: space-between;}
  .flex.XS_ac {align-items: center;}
  .flex.XS_as {align-items: flex-start;}
  .flex.XS_ae {align-items: flex-end;}
  .flex.XS_ab {align-items: baseline;}
  .flex.XS_ww {flex-wrap: wrap;}
  .flex.XS_wn {flex-wrap: nowrap;}
  .flex.XS_dc {flex-direction: column;}
}

.gp4 {gap: 4px;}
.gp8 {gap: 8px;}
.gp16 {gap: 16px;}
.gp24 {gap: 24px;}
.gp32 {gap: 32px;}
@media screen and (max-width: 768px) {
  .XS_gp4 {gap: 4px;}
  .XS_gp8 {gap: 8px;}
  .XS_gp16 {gap: 16px;}
  .XS_gp24 {gap: 24px;}
  .XS_gp32 {gap: 32px;}
}

Class Copy