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

HTML 結構

<div class="container">
  <div class="col">
    <h3>為什麼選擇了做甜點？</h3>
    <img src="path/to/img" width="100" alt="">
    <p>...</p>
    <button>馬上購買</button>
  </div>
  <div class="col main">
    <h3>為什麼選擇了做甜點？</h3>
    <img src="path/to/img" width="100" alt="">
    <p>...</p>
    <button>馬上購買</button>
  </div>
  <div class="col">
    <h3>為什麼選擇了做甜點？</h3>
    <img src="path/to/img" width="100" alt="">
    <p>...</p>
    <button>馬上購買</button>
  </div>
</div>

步驟解析

1. 基本樣式設定
   
   • 在 body 上設定 背景顏色、字體顏色、內距，並設定 box-sizing: border-box 調整大小算法
   • 在 .col 上設定背景顏色、圓角及內距
   • 設定 .col button 背景顏色、字體顏色、圓角及高度，並設定寬度設定為 100%
   • 將 .col.main 內距加大，並設定左右外距 10px

   ---

2. 在 .container 上設定 display: flex
   

3. 在 .container 上設定 align-items: center，讓交錯軸內容可以置中
   

4. 在 .col 上設定 display: flex，並加上 flex-direction 將內容改為垂直排列
   

5. 透過 align-items 將 .col 交錯軸內容置中
   

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