README.md

Hexschool-Flex-Practice

這是一份六角學院的 Flex 練習，內容包含下列十個項目：

1. 並排卡片

2. 雙欄排版

3. 雙欄選單設計

4. 表頭表尾設計

5. 常見三種排版

6. 圖文並排

7. 首頁橫幅排版

8. 圖文並排設計

9. 訂單明細

10. 產品列表

此一份練習題目也有試著引入 SMACSS 及 OOCSS 模組化CSS ，如果不清楚的可以查看這篇文章[CSS Notes] - CSS模組化。

後更 4/5： 修正一個網頁有多個 h1 的問題，另外 CSS 命名過長，比如 .container .box.boxLeft .box__content .downPart .menu .li，這樣將會造成瀏覽器渲染過久，改為 .menu .li，另外將 Class Name 階層也盡量縮短，然後將它模組化，譬如 .container .upPart， 標籤的地方都另外加上 <a></a>。

---

使用方法

1. $ git clone https://github.com/RexHung0302/Hexschool-Flex-Practice.git

2. $ cd Hexschool-Flex-Practice

3. 打開 Example 自行照著題目練習切版 或 點擊各資料夾參考

4. Enjoy it!

---

相關介紹文章

[CSS Notes] - CSS模組化

[CSS Notes] - 第一次 Flex 就上手