範例 6 - 簡易五宮格排版

霈霈 已發佈 2019-7-2

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

HTML 結構

<div class="all">
  <div class="title">
    <h2>為什麼 選擇了做甜點?</h2>
    <p>...</p>
  </div>
  <div class="container">
    <div class="col main">
      <i class="fa fa-rocket"></i>
    </div>
    <div class="col">
      <i class="fa fa-paw"></i>
    </div>
    <div class="col">
      <i class="fa fa-leaf"></i>
    </div>
    <div class="col">
      <i class="fa fa-globe"></i>
    </div>
    <div class="col">
      <i class="fa fa-car"></i>
    </div>
  </div>
</div>

步驟解析

  1. 基本樣式設定
    flex-example
    • body 上設定背景顏色、字體顏色,並設定 box-sizing: border-box 調整大小算法
    • 設定 .container 高度 400px
    • .col 上設定背景顏色、邊框、圓角、字體顏色和大小後,設定 box-sizing: border-box 調整大小算法,再將寬度設定為 25%
    • 調整 .main 字體大小

  2. body 上設定 display: flex,並透過 align-itemsjustify-content 將內容調整為垂直水平置中
    flex-example

  1. .container 上設定 display: flex,並加上 flex-wrap: wrap 讓過寬內容自動向下排列
    flex-example

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

  1. .main 寬度設定為 50%
    flex-example

  1. .main 上設定 flex: 1 1 100%,將自身元素撐大
    flex-example

  1. .col 上設定 flex: 1 1 50%,將自身元素撐開至 50%
    flex-example

  1. .col 上設定 display: flex,並透過 align-itemsjustify-content 將內容調整為垂直水平置中
    flex-example

關於筆者

暱稱:霈霈

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