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

HTML 結構

<div class="container">
  <div class="row">
    <div class="col">
      <img src="path/to/img" width="60">
      <div class="con">
        <h3>為什麼一定要吃甜點？</h3>
        <p>...</p>
      </div>
    </div>
    <div class="col">
      <img src="path/to/img" width="60">
      <div class="con">
        <h3>為什麼一定要吃甜點？</h3>
        <p>...</p>
      </div>
    </div>
    <div class="col">
      <img src="path/to/img" width="60">
      <div class="con">
        <h3>為什麼一定要吃甜點？</h3>
        <p>...</p>
      </div>
    </div>
  </div>
  <div class="row type2">
    <div class="col">
      <img src="path/to/img" width="100">
      <div class="con">
        <h3>為什麼一定要吃甜點？</h3>
        <p>...</p>
      </div>
    </div>
    <div class="col">
      <img src="path/to/img" width="100">
      <div class="con">
        <h3>為什麼一定要吃甜點？</h3>
        <p>...</p>
      </div>
    </div>
    <div class="col">
      <img src="path/to/img" width="100">
      <div class="con">
        <h3>為什麼一定要吃甜點？</h3>
        <p>...</p>
      </div>
    </div>
  </div>
  <div class="row type3">
    <div class="col">
      <img src="path/to/img" width="150">
      <div class="con">
        <h3>為什麼一定要吃甜點？</h3>
        <p>...</p>
      </div>
    </div>
    <div class="col reverse">
      <img src="path/to/img" width="150">
      <div class="con">
        <h3>為什麼一定要吃甜點？</h3>
        <p>...</p>
      </div>
    </div>
    <div class="col">
      <img src="path/to/img" width="150">
      <div class="con">
        <h3>為什麼一定要吃甜點？</h3>
        <p>...</p>
      </div>
    </div>
  </div>
</div>

步驟解析

1. 基本樣式設定
   
   • 在 .row 上設定寬度及水平置中後，設定圓角、內距與外距、字體及背景顏色
   • 在 .col 和 .con 上設定內距
   • 調整 h3 和 p 的外距

   ---

2. 在 .row 上設定 display: flex
   

3. 在 .col 上設定 display: flex
   

4. 透過 align-items 將 .col 交錯軸內容對齊軸線最前方
   

5. 在 .type2 .col 上設定 flex-direction: column，將內容調整為垂直排列
   

6. 在 .type2 .col 加上 text-align: center 將文字水平置中，再將 align-items 設為 center 覆蓋前面樣式讓圖片置中
   

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

8. 在 .type3 .col 上設定 display: flex，並透過 align-items 將交錯軸內容置中
   

9. 在 .reverse 上設定 flex-direction: row-reverse 將內容反轉