中文總教學 2：pxCode 編輯概念

對於前端工程師而言，一般在進行網頁開發或程式撰寫的時候，必須先透過潛意識去思考網頁的結構和適配行為，有了雛形的認知後，才會開始撰寫 HTML。

在 pxCode 裡，我們也建議應用相同的概念 —— 在切版前先進行一輪的【思考切版】。當有了結構概念之後，再動手執行，會更有效率！

這一篇文章裡，我們來一起看看 pxCode 基本編輯概念，讓我們在執行切版前，知道必須思考什麼事情？

-

在 pxCode，一共有三種基本群組分類。從上圖可見，由左上至下分別是【直的】（FlexGroup Column）、【橫的】（FlexGroup Row）、以及【絕對定位】（Normal Group）。

一般的設計稿上，都是以 CSS 程式碼去拼湊出整個網頁的結構。不過在 pxCode 裡，切版的概念是反過來的。也就是說，我們需要構想內容元件的佈局，再去編輯成一個完整的 HTML 程式碼

而只需要掌握這三種群組概念，基本上就可以排列相當多樣性的網頁內容。而當我們將設計稿導入 pxCode 之後，就可以開始思考左邊三種群組類別的 CSS 程式碼結構應該是什麼樣子，接著再透過切版工具，去完成響應式動作。

我們來總結一次 pxCode 的模型類別。左邊兩個，分別是直排與橫排的內容元件，即【FlexGroup Column】和【FlexGroup Row】，佔了一般網頁切版中的 80%。而【Group】的絕對定位關係發生的機率則佔了剩下的 20%。

我們這裡就來看看 CSS 的程式碼，可以怎麼去詮釋以上這三種群組類別。

-

除了直排與橫排，還有一個相當重要的群組類別。雖然這一部分之佔了平均 20%，不過卻也是相對比較難以理解的。

以下這張圖，我們可以看得出它相對值和橫，是以前和後的概念所組成。因此，我們在動手切版之前，必須思考清楚知道這幾個重疊的內容元件，應該怎麼前後排列。

其中，在【一般群組】（Group）裡面，也細分了三種內容狀態，分別是【主要子內容】（Main Child）、佔空間和群組內定位的【字內容】（Absolute）、以及不佔空間且自動定位的【附屬子內容】（Attach）。

這三種內容狀態，都有各自的特性和調整模式。為了達到一個最有效的響應式狀態，就需要掌握他們的特性，來執行更完整的思考切版。以下影片，將提供解說：

-

這樣一來，我們就可以更清楚知道這些內容元件在設計稿裡的位置，以方便我們進行導入設計稿之後的思考切版。

下一篇，就讓我們一起來認識如何透過【思考切版】，除了掌握設計稿的內容以外，也大幅度地加速切版時的概念和效率！

-

【關注 pxCode】
官網：https://www.pxcode.io/
FB：https://www.facebook.com/pxCode
Medium：https://medium.com/pxcode