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

HTML 結構

<div class="container">
  <div class="col main">
    <h3>為什麼　選擇了做甜點？</h3>
    <p>...</p>
  </div>
  <div class="col">
    <h3>為什麼　選擇了做甜點？</h3>
    <p>...</p>
  </div>
  <div class="col">
    <h3>為什麼　選擇了做甜點？</h3>
    <p>...</p>
  </div>
  <div class="col">
    <h3>為什麼　選擇了做甜點？</h3>
    <p>...</p>
  </div>
  <div class="col">
    <h3>為什麼　選擇了做甜點？</h3>
    <p>...</p>
  </div>
</div>

步驟解析

1. 基本樣式設定
   
   • 在 body 上設定 背景顏色、內距
   • 在 .col 上設定邊框、背景顏色及內距，並設定 box-sizing: border-box 調整大小算法

   ---

2. 在 .container 上設定 display: flex
   

3. 在 .container 上設定 flex-wrap: wrap，讓內容可以自動往下排列
   

4. 在 .col 上設定 1 1 33.3%，將基本大小調整為 33.3%，並開放伸縮的功能
   

5. 透過高度設定，將 .col 設定為等高
   

6. 在 .col.main 上設定 flex-basis: 66.6%，將基本大小調高一倍
   

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