フレックスボックスの活用

.d-flex

札幌
東京
名古屋
大阪
福岡
    .d-flex {
      display: -ms-flexbox !important;
      display: flex !important;
    }

.d-flex.justify-content-center

札幌
東京
名古屋
大阪
福岡

.d-flex.flex-column

札幌
東京
名古屋
大阪
福岡
        .flex-column {
          -ms-flex-direction: column !important;
          flex-direction: column !important;
        }
        

.d-flex.flex-wrap

札幌
東京
名古屋
大阪
福岡
札幌
東京
名古屋
大阪
福岡
札幌
東京
名古屋
大阪
福岡
福岡
札幌
東京
名古屋
大阪
福岡

.d-fex.align-content-between

札幌
東京
名古屋
大阪
福岡
札幌
東京
名古屋
大阪
福岡
札幌
東京
名古屋
大阪
福岡
福岡
札幌
東京
名古屋
大阪
福岡

.d-flex.align-content-center

札幌
東京
名古屋
大阪
福岡
札幌
東京
名古屋
大阪
福岡
札幌
東京
名古屋
大阪
福岡
福岡
札幌
東京
名古屋
大阪
福岡