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

HTML 結構

<div class="container">
  <div class="col">
    <div class="photo">
      <i class="fa fa-cutlery"></i>
    </div>
    <div class="con">
      <article>
        <h3>為什麼 一定要吃甜點？</h3>
        <p>...</p>
      </article>
      <div class="btns">
        <i class="fa fa-commenting"></i>
        <i class="fa fa-heart-o"></i>
        <i class="fa fa-share"></i>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="photo">
      <i class="fa fa-smile-o"></i>
    </div>
    <div class="con">
       <article>
        <h3>為什麼 一定要吃甜點？</h3>
        <p>...</p>
      </article>
      <div class="btns">
        <i class="fa fa-commenting"></i>
        <i class="fa fa-heart-o"></i>
        <i class="fa fa-share"></i>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="photo">
      <i class="fa fa-snowflake-o"></i>
    </div>
    <div class="con">
       <article>
        <h3>為什麼 一定要吃甜點？</h3>
        <p>...</p>
      </article>
      <div class="btns">
        <i class="fa fa-commenting"></i>
        <i class="fa fa-heart-o"></i>
        <i class="fa fa-share"></i>
      </div>
  </div>
</div>

步驟解析

1. 基本樣式設定
   
   • body 背景顏色及內距設定，並設置 box-sizing: border-box 調整大小設置
   • .col 外距及陰影設定
   • .photo 背景顏色、字體大小及顏色
   • .con 背景顏色、內距設定，並設置 box-sizing: border-box
   • .con .btns, .con h3 顏色及字體設定

   ---

2. 在 .container 上設定 display: flex 效果
   

3. 在 body 上設定 display: flex 效果，並透過 align-items: center 將交錯軸內容置中
   

4. .photo, .con 高度設定
   

5. .photo 上設定 display: flex 效果，並透過 align-items, justify-content 將主軸與交錯軸內容置中
   

6. .con 上設定 display: flex 效果
   

7. 在 .con 上設定 flex-direction 將內容設為垂直排列
   

8. 透過 justify-content: space-between 將內容對齊主軸線最前端與最末端