範例 8 - 常見三種排版

霈霈 已發佈 2019-7-1

基本樣式範例練習網址: 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. 基本樣式設定
    flex-example
    • .row 上設定寬度及水平置中後,設定圓角、內距與外距、字體及背景顏色
    • .col.con 上設定內距
    • 調整 h3p 的外距

  2. .row 上設定 display: flex
    flex-example

  1. .col 上設定 display: flex
    flex-example

  1. 透過 align-items.col 交錯軸內容對齊軸線最前方
    flex-example

  1. .type2 .col 上設定 flex-direction: column,將內容調整為垂直排列
    flex-example

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

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

  1. .type3 .col 上設定 display: flex,並透過 align-items 將交錯軸內容置中
    flex-example

  1. .reverse 上設定 flex-direction: row-reverse 將內容反轉
    flex-example

關於筆者

暱稱:霈霈

介紹:六角學院前端工程師,目前就讀高雄師範大學的軟體工程學系研究所