一.水平對齊

<div class="container" id="demo">
  <div class="row justify-content-start">
    <div class="col-4"><span>1</span></div>
    <div class="col-4"><span>2</span></div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4"><span>1</span></div>
    <div class="col-4"><span>2</span></div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4"><span>1</span></div>
    <div class="col-4"><span>2</span></div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4"><span>1</span></div>
    <div class="col-4"><span>2</span></div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4"><span>1</span></div>
    <div class="col-4"><span>2</span></div>
  </div>
</div>


#demo.container,
#demo.container-fluid{
  background: #054bd1;/*藍*/
  height: 100vh;
  color: white;
}

#demo.container .row{
  background: #021d51;/*深藍*/
  boder-bottom: 1px solid #000;
  height: 30vh;
}

#demo.container .row > div > span{
  display: block;
  background: #487bdd;/*淺藍*/
  color: white;
  font-size: 32px;
  padding: 8px;
  border: 1px solid #021d51;/*深藍*/
}

重點：
1.justify-content-start很像float置左
(flexbox屬性: justify-content: flex-start!important;)
2.justify-content-center很像float置中
(flexbox屬性: justify-content: flex-center!important;)
3.justify-content-end很像float置右
(flexbox屬性: justify-content: flex-end!important;)
4.justify-content-between中間空一大格， 左右的col往旁邊靠
(flexbox屬性: justify-content: space-between!important;)
5.justify-content-around看起來就是左右固定平均的內留白
(flexbox屬性: justify-content: space-around!important;)

codepen
參考：bootstrap4