基本樣式範例練習網址: https://codepen.io/peiqun/pen/gNvVGZ
完整範例網址: https://codepen.io/peiqun/pen/yGYGYQ

HTML 結構

<div class="all">
  <div class="title">
    <h2>為什麼　選擇了做甜點？</h2>
    <p>...</p>
  </div>
  <div class="container">
    <div class="col main">
      <i class="fa fa-rocket"></i>
    </div>
    <div class="col">
      <i class="fa fa-paw"></i>
    </div>
    <div class="col">
      <i class="fa fa-leaf"></i>
    </div>
    <div class="col">
      <i class="fa fa-globe"></i>
    </div>
    <div class="col">
      <i class="fa fa-car"></i>
    </div>
  </div>
</div>

步驟解析

1. 基本樣式設定
   
   • 在 body 上設定背景顏色、字體顏色，並設定 box-sizing: border-box 調整大小算法
   • 設定 .container 高度 400px
   • 在 .col 上設定背景顏色、邊框、圓角、字體顏色和大小後，設定 box-sizing: border-box 調整大小算法，再將寬度設定為 25%
   • 調整 .main 字體大小

   ---

2. 在 body 上設定 display: flex，並透過 align-items、justify-content 將內容調整為垂直水平置中
   

2. 在 .container 上設定 display: flex，並加上 flex-wrap: wrap 讓過寬內容自動向下排列
   

3. 透過 flex-direction 將 .container 內容調整為垂直排列
   

5. 將 .main 寬度設定為 50%
   

7. 在 .main 上設定 flex: 1 1 100%，將自身元素撐大
   

8. 在 .col 上設定 flex: 1 1 50%，將自身元素撐開至 50%
   

9. 在 .col 上設定 display: flex，並透過 align-items、justify-content 將內容調整為垂直水平置中