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

HTML 結構

<div class="all">
  <div class="menu">
    <img src="path/to/img" width="200" alt="">
    <div class="list">
      <p>回到首頁</p>
      <p>關於我們</p>
      <p>熱銷產品</p>
      <p>購物車</p>
    </div>
    <div class="copy">
      07-1234-5678 <br>
      [email protected] <br>
      800 高雄市新興區幸福路 520 號
    </div>
  </div>
  <div class="content">
    <div class="container">
      <h3>集使濟業看</h3>
      <p>...</p>
      <div class="product">
        <div class="sweet"></div>
        <div class="sweet"></div>
        <div class="sweet"></div>
        <div class="sweet"></div>
        <div class="sweet"></div>
        <div class="sweet"></div>
      </div>
      <h4>特要名得家到的學之點大得過不</h4>
      <p>...</p>
    </div>
  </div>
</div>

步驟解析

1. 基本樣式設定
   
   • 在 .all 上設定 100% 高度
   • 在 .menu 上設定字體、背景顏色和 50px 上下內距
   • 在 .content 上設定 overflow-y: auto，讓內容超過設定寬度時加上滾輪，並設定內距讓視覺上看起來不會太擠
   • 在 .sweet 上設定高度、背景圖片及邊框，並設定 box-sizing: border-box 調整大小計算方式

   ---

2. 在 .all 上設定 display: flex 將內容並排
   

3. 在 .menu 上設定 flex: 0 1 350px，讓選單寬度不超過 350px；
   .content 設定 flex: 1 1 500px，開放寬度的伸縮功能，來配置版面。
   

4. 在 .menu 加上 display: flex 的效果
   

5. 透過 flex-direction 將 .menu 內容設定為垂直排列，並設定 align-items: center 將交錯軸內容置中對齊
   

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

7. 在 .product 加上 display: flex 的效果，並透過 flex 的設定賦予 .sweet 寬度
   

8. 在 .product 上設定 flex-wrap: wrap，加上斷行效果