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

HTML 結構

<div class="container">
  <div class="col">
    <img src="path/to/img" width="150">
    <h1>Sweetaste*</h1>
  </div>
  <div class="col">
    <div class="con">
      <h3>為什麼選擇了做甜點？</h3>
      <p>...</p>
      <h4>— 想吃甜點　是不需要理由的。</h4>
    </div>    
  </div>
</div>

步驟解析

1. 基本樣式設定
   
   • 在 .container 上設定 100% 高度以及 5px 左右內距
   • 在 .col 上設定背景顏色、圓角及外距

   ---

2. 將父元素 .container 加上 display: flex 效果
   

4. 在 .col 上設定 flex: 1 1 50%，讓 .col 可以依父元素寬度來做等比伸縮
   

5. 在 .col 加上 display: flex 效果
   

6. 透過 flex-direction: column 將 .col 內容垂直排列
   

7. 設定 align-items、justify-content 將 .col 內容呈現水平垂直置中