flexGrid 自動針對內元件等分
後方不帶 -- 等分數值
-
l-fg-col
-
l-fg-col
-
l-fg-col
-
l-fg-col
-
l-fg-col
-
l-fg-col
flexGrid 內元件設定等分寬度與自動等分
-
l-fg-col--2-1 ( 2 分之 1 )
-
l-fg-col ( 自動 2 分之 1 )
-
l-fg-col--3-1 ( 3 分之 1 )
-
l-fg-col ( 自動 3 分之 2 )
-
l-fg-col--4-1 ( 4 分之 1 )
-
l-fg-col ( 自動 4 分之 3 )
-
l-fg-col--4-1 ( 4 分之 1 )
-
l-fg-col ( 自動 4 分之 1 )
-
l-fg-col ( 自動 4 分之 1 )
-
l-fg-col ( 自動 4 分之 1 )
-
l-fg-col--5-1 ( 5 分之 1 )
-
l-fg-col ( 自動 5 分之 4 )
-
l-fg-col--5-1 ( 5 分之 1 )
-
l-fg-col ( 自動 5 分之 1 )
-
l-fg-col ( 自動 5 分之 1 )
-
l-fg-col ( 自動 5 分之 1 )
-
l-fg-col ( 自動 5 分之 1 )
-
l-fg-col--6-1 ( 6 分之 1 )
-
l-fg-col ( 自動 6 分之 5 )
-
l-fg-col--7-1 ( 7 分之 1 )
-
l-fg-col ( 自動 7 分之 6 )
-
l-fg-col--8-1 ( 8 分之 1 )
-
l-fg-col ( 自動 8 分之 7 )
-
l-fg-col--9-1 ( 9 分之 1 )
-
l-fg-col ( 自動 9 分之 8 )
-
l-fg-col--10-1 ( 10 分之 1 )
-
l-fg-col ( 自動 10 分之 9 )
-
l-fg-col--11-1 ( 11 分之 1 )
-
l-fg-col ( 自動 11 分之 10 )
-
l-fg-col--12-1 ( 12 分之 1 )
-
l-fg-col ( 自動 12 分之 11 )
-
l-fg-col--12-1 ( 12 分之 1 )
-
l-fg-col--12-3 ( 12 分之 3 )
-
l-fg-col ( 自動 12 分之 1 )
-
l-fg-col ( 自動 12 分之 1 )
-
l-fg-col ( 自動 12 分之 1 )
-
l-fg-col ( 自動 12 分之 1 )
-
l-fg-col ( 自動 12 分之 1 )
-
l-fg-col ( 自動 12 分之 1 )
-
l-fg-col ( 自動 12 分之 1 )
-
l-fg-col ( 自動 12 分之 1 )
-
l-fg-col--12-1 ( 12 分之 1 )
-
l-fg-col--12-1 ( 12 分之 1 )
-
l-fg-col--12-1 ( 12 分之 1 )
-
l-fg-col--12-1 ( 12 分之 1 )
-
l-fg-col--12-1 ( 12 分之 1 )
-
l-fg-col--12-1 ( 12 分之 1 )
-
l-fg-col--12-1 ( 12 分之 1 )
-
l-fg-col--12-1 ( 12 分之 1 )
-
l-fg-col--12-1 ( 12 分之 1 )
-
l-fg-col--12-1 ( 12 分之 1 )
-
l-fg-col--12-1 ( 12 分之 1 )
-
l-fg-col--12-1 ( 12 分之 1 )
-
l-fg-col--12-1 ( 12 分之 1 )
flexGrid 內元件空間、排版與定位
透過後代選擇的方式將啟用的 .l-fg-colsSpacing-m 與 .l-fg-colsSpacing-p 用於祖、父層，
可以將 .l-fg-row 下所有 l-fg-col 或是 l-fg-col--xx-x 樣式名受到操作，
數值單位 px 比重由大到小，小的數值比重要重，例如 margin 0px 主要用於清出定位或是佔位空間使用, 將比重處理成倒序。
子代比重透過 !important 優先，會重於孫代的樣式比重。
級數由 10-0 共 11 級，每級 4px 為一個基數。
所有內元件透過 margin left 與 right 的 12 px 自動於 .l-fg-row 內平均寬度
.l-fg-row 裡的內元件透過 .l-fg-col 元件數產生自動的格線數，在透過 margin 的個定數值佔住容器中的固定寬度後，
.l-fg-col 自動元件會動計算內元件中的寬度自動平均寬度。
margin 無法使用 auto 來推出空間操作定位效果。
-
l-fg-col
-
l-fg-col
-
l-fg-col
-
l-fg-col
-
l-fg-col
-
l-fg-col
-
l-fg-col
透過後代選擇後蓋前特性，清除祖層元件空間設定
使用 .l-fg-colsSpacing-p--0 與 .l-fg-colsSpacing-m--0 清除內元件空間，概念類工具類型的樣式使用。
-
l-fg-col--12-1 ( 12 分之 1 )
-
l-fg-col--12-1 ( 12 分之 1 )
-
l-fg-col--12-1 ( 12 分之 1 )
-
l-fg-col--12-1 ( 12 分之 1 )
-
l-fg-col--12-1 ( 12 分之 1 )
-
l-fg-col--12-1 ( 12 分之 1 )
-
l-fg-col--12-1 ( 12 分之 1 )
-
l-fg-col--12-1 ( 12 分之 1 )
-
l-fg-col--12-1 ( 12 分之 1 )
-
l-fg-col--12-1 ( 12 分之 1 )
-
l-fg-col--12-1 ( 12 分之 1 )
-
l-fg-col--12-1 ( 12 分之 1 )
透過 .l-fg-colsSpacing-p--X 調整內元件的空間
-
l-fg-col--5-1 ( 5 分之 1 )
-
l-fg-col--5-1 ( 5 分之 1 )
-
l-fg-col--5-1 ( 5 分之 1 )
-
l-fg-col--5-1 ( 5 分之 1 )
-
l-fg-col--5-1 ( 5 分之 1 )
-
l-fg-col--5-1 ( 5 分之 1 )
-
l-fg-col--5-1 ( 5 分之 1 )
-
l-fg-col--5-1 ( 5 分之 1 )
-
l-fg-col--5-1 ( 5 分之 1 )
-
l-fg-col--5-1 ( 5 分之 1 )
指定內元件等分 margin 使用
內元件等分 margin 配合使用無法讓內元件寬度自動，內元件寬度計算已有數值操作，超過父層容器寬度會自動下移。
-
l-fg-col--5-1 ( 5 分之 1 )
-
l-fg-col--5-1 ( 5 分之 1 )
-
l-fg-col--5-1 ( 5 分之 1 )
-
l-fg-col--5-1 ( 5 分之 1 )
-
l-fg-col--5-1 ( 5 分之 1 )
有寬度數值可以透過 margin auto 來達成定位效果。
-
l-fg-col--5-1 ( 5 分之 1 )
-
l-fg-col--5-1 ( 5 分之 1 )
-
l-fg-col--5-1 ( 5 分之 1 )
-
l-fg-col--5-1 ( 5 分之 1 )
-
l-fg-col--5-1 ( 5 分之 1 )
-
l-fg-col--5-1 ( 5 分之 1 ) + u-mx--auto
-
l-fg-col--5-1 ( 5 分之 1 ) + u-ml--auto
-
l-fg-col--5-1 ( 5 分之 1 ) + u-mr--auto
等分計算公式
等分計算公式，以 10 等分為例
容器可用總寬度 / 總等分 = 單等分寬度
1000/10=100
單等分寬度 * (總等分-1) = 最大等分寬度
100*(10-1)=900