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

HTML 結構

<div class="all">
  <div class="top">
    <img src="path/to/img">
    <p>more</p>
  </div>
  <div class="row">
    <div class="pic"></div>
    <div class="con">
      <article>
        <h2>想吃甜點　是不需要理由的。</h2>
        <p>...</p>
      </article>
      <div class="btns">
        <i class="fa fa-share-square-o"></i>
        <i class="fa fa-heart-o"></i>
        <i class="fa fa-facebook-square" ></i>
      </div>
    </div>
  </div>
</div>

步驟解析

1. 基本樣式設定
   
   • 在 body, html 上設定高度 100%，及背景顏色
   • 在 .all 上設定 90% 寬度
   • 在 .top 上設定高度 60px，在設定背景顏色、字體顏色、圓角及內距
   • 設定 .row 白色背景及調整內距
   • 調整 .btns i 字體大小、顏色及內距
   • 在 .row .pic 上設定高度、寬度，並設定背景圖片

   ---

2. 在 .top 上設定 display: flex，並透過 justify-content 將主軸線內容調整為靠邊對齊，在設定 align-items 將交錯軸置中對齊
   

3. 在 .row 上設定 display: flex，並設定
   

4. 在 .con 上調整左外距留白，並加上 display: flex 再透過 flex-direction 將內容調整為垂直排列
   

5. 在 .con 上設定 display: flex;，並透過 justify-content 將主軸線內容靠邊對齊，再將 align-items 將交錯軸靠終邊對齊
   

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