Hugo Habor

Author: lioajimzen

  • 淺談(很淺)工業通訊-MODBUS

    主要淺顯地介紹一下這個存在了40年以上的工業通訊格式Modbus

    Modbus 這東西有印象, 高職、理工系所會教到的! (我是程式仔…. 別揍我! )

    後來的 Ethernet IP, Modbus TCP, Profibus, EtherCAT 當你翻一翻這些原廠原文手冊的時候, 你會看到他們真的長得很像~

    差別在於用甚麼網路架構、電氣特性以及通訊Bus頻寬

    有些知名大廠會留好幾手, 這就要靠各位工程師自己去發掘了。

    支持一下肝肝工程師'V' ETH捐款

    < 什麼是MODBUS ? >

    *以下文章某些段落真的不用我自己寫了, 因為人家寫得比我好🤣

    固有摘錄自: 維基百科, NI序列通訊概觀

    Modbus是一種串列通訊協定，是Modicon公司（現在的施耐德電氣 Schneider Electric）於1979年為使用可程式化邏輯控制器（PLC）通信而發表。Modbus已經成為工業領域通訊協定事實上的業界標準，並且現在是工業電子裝置之間常用的連線方式。

    [1] Modbus比其他通信協定使用的更廣泛的主要原因有：

    1. 公開發表並且無著作權要求 ( 古早就開源?
    2. 易於部署和維護 ( 好維護, 真的?
    3. 對供應商來說，修改移動原生的位元或位元組沒有很多限制

    Modbus允許多個 (大約240個) 裝置連接在同一個網路上進行通信，舉個例子，一個由測量溫度和濕度的裝置，並且將結果傳送給電腦。在資料採集與監視控制系統（SCADA）中，Modbus通常用來連接監視電腦和遠端終端控制系統（RTU）。

    Modbus通訊協定_說得人話一點

    1.棒球員之間的溝通

    打者跟埔手打的暗號, 要事先溝通+擬定, 上場前就要充分演練, 打者與埔手才能在戰場上運用。

    2.如果有看過捍衛戰士2的話, 你就會知道….

    如果阿湯哥事先知道敵軍飛行員的手勢暗號, 是不是就能避免跟5代戰機纏鬥?

    < 協定版本 >

    Modbus協定目前存在用於序列埠(Serial port)、乙太網路(Ethernet)以及其他支持網際網路協定的網路的版本。

    大多數Modbus裝置通訊是通過序列埠EIA-485實體層進行[2]。

    < 日常終端通訊設備 >

    你的桌上型電腦、筆電主機板有機會支援這個裝置

    • 記得要挑產品規格寫道: 附1個串列埠插座

    主機板廠商會給你一個原生實體Serial port 插Pin, 不過你得自己買一張背板卡將其引導出來!

    • 萬一我的電腦沒有原生實體Serial port 插Pin 怎麼辦?

    每台電腦至少都會有PCIE, USB Port, 只要按照轉卡廠商驅動程式安裝, 基本上沒甚麼問題。

    < RS232 概要 >

    RS232 為IBM 相容電腦所產生的通訊架構, 該架構只僅限 1:1 (點對點) 終端裝置通訊, 實體通訊線長度不超過15 m

    很古早以前的接點數是25 D-Sub, 目前常用的是 9 D-Sub

    目前常用的9 Pin 數

    通訊基本上都是採用交互握手的方式進行通訊,

    這裡我不用太艱澀的方式來說明, 我用航海王人物的互動特性來舉例。

    今天香吉士要跟索隆傳遞訊息!

    1.香吉士先在腦袋內想好要罵他的話”綠藻頭”

    2.香吉士想好了之後, 暖身的問候一下(Request)索隆: ㄟ~ 那個整天在睡覺的!

    3.香吉士接下來罵索隆: “綠藻頭!” 。

    4.索隆接收到髒話。

    5.索隆情緒化反應了: 你這個”王x但!”

    6.香吉士接收到索隆的髒話”王x但! “

    7.香吉士得到了反饋, 繼續做自己的事情。

    不要罵我腐喔, 我甚麼都不知道! 圖片來源

    < RS422, RS485 概要 >

    這兩者差異就在電氣特性的不同

    *所以RS232與 485,422 的接頭型狀若長一樣, 請先查明, 不要亂插!

    很可能會導致通訊模組燒毀喔。

    RS485

    • 半雙工 half-duplex
    • 只有一對差動 Differential pair, 它是一種經濟型且穩定的多從站網路型態。
    • 通訊最遠距離 1.2 Km
    • No.0站與 No.(N-1)站都要有終端電阻( 通常是100Ω 、120Ω 、330Ω )
    • 最多底下子站可以通訊到 256站
    • 一次發送32站

    RS422

    • 全雙工 full-duplex
    • 有兩對差動 Differential pair且多從站網路型態。
    • 穩定且高速
    • 通訊最遠距離 1.2 Km
    • 若真的距離太長, 可接上終端電阻 100~120Ω
    • 最多底下子站可以通訊到 256站
    • 一次發送10站

    < 通訊電氣特性圖 >

    圖來源

  • CSS-Align Item 對齊標籤內容

    CSS-Align Item 對齊標籤內容

    https://affinity.help/designer/en-US.lproj/index.html?page=pages/ObjectControl/align.html?title=Aligning%20objects

    首先複習一下


    之前都在研究Justify-content 是屬於 X軸 主軸方向。

    這一篇主要講述 Y軸 也就是交錯軸!

    MDN_Web 演示範例

    https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

    HTML 文本

    <ul class="menu">
  <li><a href="#">首頁</a></li>
  <li><a href="#">政治</a></li>
  <li><a href="#">娛樂</a></li>
  <li><a href="#">論壇</a></li>
  <li><a href="#">財經</a></li>
  <li><a href="#">運動</a></li>
</ul>

    CSS 裝飾語言

    .menu{
    display: flex;
    background: greenyellow;
    width: 1000px;
    margin: 0 auto;
    padding: 50px;

    flex-direction:column;
    justify-content:flex-start;
    flex-wrap: nowrap;

    align-items:center;
  }


  .menu li{
    background: rgb(31, 161, 231);
    font-size: 30px;
    width: 600px;
    text-align: center;
    margin: 10px;
  }

  .menu li a{
    margin: 6px;
    display: block;
    background: #4a4afc;
    padding-top: 5px;
    padding-bottom: 10px;
    text-decoration: none;
    color: #FFFFFF;
  }
  .menu li a:hover{
    background: #6A6AFF;  
    color: #ADADAD;
   }

    演示結果

  • JS-同步(Sync)與非同步(Async)-SetTimeout-SetInterval

    JS-執行緒與同步(Sync)與非同步(Async)概念 這一篇有概述了同步(Sync)與非同步(Async)。

    所以我們得把以前學得執行堆疊概念拿出來套用一下

    接下來要繼續說明一下, 同步(Sync)與非同步(Async)的應用吧

    [2022_11_02 新增SetInterval ]

    參考資料: 六角學院

    參考連結: 
談談JavaScript SetTimeout/SetInterval
    給予小肝肝工程師支持吧'v': ETH/ERC20

    JavaScript 

    function tost(){

console.log('烤土司');
}

function makecoffee(){

console.log('煮咖啡');
}

function callSomeone(someone){

   console.log('打給'+someone);

   setTimeout(function(){ 
    console.log("刷牙完成");
     },30)
}

function doWork(){
    var auntie ='漂亮阿姨'

    tost();
    callSomeone(auntie);
    makecoffee();
}

doWork();

    SetTimeout() 用法

    在講解執行順序之前, 我們會先說明事件佇列

    在你執行到SetTimeout()所在的Function, 內部的陳述式會儲存到事件佇列。

    先記起來!

    SetTimeout()方法1

    function functionname(someone){

   console.log('A');

   setTimeout(function(){ 
    console.log("B");
     },delaytime) 
}
    1. SetTimeout() 的delaytime單位(ms)
    2. SetTimeout() 要整個程式順序跑完以後才會執行
    3. SetTimeout() 只執行一次就會結束!
    4. SetTimeout( 非字串,delaytime ) 用這種方式, 主控台的執行效率會比較好

    SetTimeout()方法2

    function functionname(someone){

   console.log('A');


   setTimeout(function(){ 
    'console.log("B")';
     },delaytime) 
}

    不同在於

    SetTimeout( 字串,delaytime) 裡面陳述, 我們用純字串

    這種方式在主控台的執行效率較不好。

    執行順序

    執行結果

    SetInterval 用法

    setInterval() 固定延遲了某段時間之後，才去執行對應的程式碼，然後「不斷循環」。

    SetInterval 結構

    var intervalID = scope.setInterval(func, delay[, 參數1, 參數2, ...]);
var intervalID = scope.setInterval(code, delay);

    var timeInterval_process = window.setInterval(( () => console.log("Hello!") ), 1000);

  • JS-執行緒與同步(Sync)與非同步(Async)概念

    在Javascript世界裡面, 它仍然是依照同步的概念去執行程式

    意思就是Javascript是單執行續(Single-Thread) 的語言

    請給予肝肝的小工程師支持吧 'v': ETH/ERC20

    甚麼是同步? 甚麼是非同步?

    ⌜同步⌟

    ⌜同步⌟這一詞, 懵懂的我剛開始以為是Multi-thread, 或者因為中文翻譯而將意思誤解為同時進行

    *Multi-thread 之後我會在寫一篇來說說

    簡單來說就是把事情編排好順序, 藉由一些方式讓它按照你編排的順序去執行。

    每次只做一件事情, 這才叫做 ⌜同步⌟。

    ⌜非同步⌟

    ⌜非同步⌟的字面意思就很好了解

    指派任務的可以多個母線開頭, 做完這件事情, 你還能再去做其他的被指派任務。

    同步(Sync)

    每天當你起床之後, 你腦袋一定會想等下要先刷牙、煮咖啡、吃早餐。

    但是你只能烤完吐司, 再來煮咖啡, 咖啡煮完再來刷你的牙。

    這樣不是很麻煩嘛! 還要屈就之前的任務?

    同步

    非同步(Async)

    但是我不想要做完A再來做B再來做C… 很浪費時間!

    所以我們利用下圖流程來解釋非同步。

    1. 要刷牙之前, 我們將吐司烤爐啟動
    2. 再將咖啡機啟動
    3. 然後自己跑去刷牙
    4. 刷牙的同時, 機器仍然運作中
    5. 刷完牙, 吐司烤好,咖啡也煮好了!
    非同步

    結語

    把同步與非同步的概念先建構好, 之後會用單一篇章來說說SetTimeout、Callback、AJAX 

  • 成長衰退、軟著陸定義

    如果有關心總體經濟的人應該會知道, FED(美國聯邦儲蓄組織)、IMF(國際貨幣基金組織)都在針對這兩個以前發生過的總體經濟現象去做預測。

    給予肝肝小工程師一點支持'V'

    最近美國FED主席胞爾, 看樣子是鐵了心要定調打趴CPI的招式了

    就是給你升息…. 一直升息 Surprised MDFK👻

    <歐洲>

    加上最近美國爸爸援助了8月份最大一筆30億US, 還有德國的5億 EUR, 更加劇了俄羅斯自己是天然氣供應大國“拿俏”角色, 天然氣價格在08/25 的時候到了最高點

    導致本來預期軟著陸的情形, 可能就因此變卦.

    IMF 也預測了全球經濟將進入衰退

    https://blogs.imf.org/2022/08/30/from-war-and-inflation-to-food-and-cargo-charts-chronicle-volatile-year/
    <美國>

    看來胞爾自己陷入了“成長衰退”, 要說出來這幾個字之前, FED主席從今年3月開始自相矛盾了😨

    目標是要把CPI 壓到2%以下

    https://www.federalreserve.gov/newsevents/speech/brainard20220829a.htm

    What’s a soft landing? 甚麼是軟著陸?

    假設央行有能力將經濟放緩到足以抑制需求和控制通脹的程度

    但不足以引發GDP(國內生產毛額)收縮和NR(失業率)上升。

    這樣做需要有技巧且聰明的決策和運氣的相互結合。

    What’s a growth recession?  甚麼是成長衰退?

    這是

    • 長期增長無力
    • 失業率上升

    經濟擴張速度低於約 1.5% 至 2% 的長期趨勢。但是要避免了徹底收縮。

  • 內在價值/外在價值

    沒有一個人的人生是一帆風順, 很多時候… 還會覺得是不是老天爺在搞我… ( 跟著我從小到大的朋友, 應該就會知道 )

    活到這個歲數時, 覺得以前那種想賺大錢的心情, 已沒有這麼地強烈了. ( 躺著賺的話, 我可以🤣)

    目前最想尋找的應該是自己的本命, 以及手上的工作可否有其他的延伸線, 所以常常把自己搞得忙碌不堪…

    甚至晚上時…. 我的愛人也常抱怨, 我為何晚上了還在想工作有關的事情 ( 這部分我真的要找時間好好檢視跟檢討… 🤪)

    ⌜請問侯文詠⌟

    這本書是我買了好一段時間, 最近比較有時間可以快速瀏覽一遍( 沒錯, 我的時間真的只夠一遍)

    對侯文詠老師的印象, 還停留在⌜不乖⌟、⌜白色巨塔⌟ 這本書。

    請給予肝肝的小工程師一點支持'V'" : ETH/ERC20

    在前幾年, 我們都面對了Covid-19帶來經濟衰退與產業鏈挪移, 作者本人自己所處的產業領域活絡度大減的情況下, 自然會有一些些” 想放過自己, 就此安頓下來的” 的想法.

    *我當然不是說“安定”不好, 更不是說有一份“安穩”且“工作內容差異不大” 就是不好.

    而是想要面對未來不確定性的應變能力所帶來的安穩吧.

    當我翻到了⌜請問侯文詠⌟ 這本書, Page38 所講到內在價值與外在價值, 這本書我最有感觸的章節.

    <何謂外在價值>

    當你心有所向的時候, 這個你所追求的職業頭銜, 追求的是它的內在價值還是外在價值?

    1.當醫生可以救人, 受人尊敬, 走路有風, 呼風喚雨; 又或者是可以有機會躋身到社會的上流人士?

    2.當竹科研發工程師能夠得知最新的科技趨勢, 上下游產業的策略以及周邊都是可以提供內線訊息的人脈資源etc… 甚至還比較有機會能賺到好幾桶金.

    我們從小到大接觸的前輩, 幾乎都灌輸錢多的工作就是好工作, 年輕的時候拚一點, 再不快一點你就沒機會了

    他們自己的生活經驗與社會體悟, 當然沒有錯….

    但排除這些師長與父母, 我們有給自己機會停下來面對…?

    面對此時此刻所遭遇到的困難嗎… ?

    <一路上遭遇到的困難>

    當初遇到了很多領域需要整合的techtical point, 極限地自我提取腦袋裡的Knowhow 以及處裡客戶他們在現場所累積的”強烈情緒反應”

    ( 我承認…當初真的心力憔悴, 無法短時間累積起來可直接球來就打的能力 😵)

    剛開始入行的時候, 真的很排斥…

    那個心情大概就是很想辭職的心情吧 🤪

    更不用說, 到了江湖上…. 年輕的我們很容易被一些說說人以及畫餅人拐騙。

    那種深刻的挫折感… 要在你的下一個案子到手前, 自己默默地擦乾鍵盤上的眼淚, 咬緊牙關… 一邊寫程式一邊想怎麼節省成本 情況下將它轉移+舒緩掉 (還不能喝酒 🤪 )

    <內在價值>

    侯醫師在住院醫師期間, 看到病患因病患疼痛… 自己卻只能開藥、安撫病患情緒

    他自己捫心自問: 我當上了人人稱羨的醫生, 卻只能眼睜睜看著病患繼續痛苦下去, 無法讓病患獲得實質的改善。

    開始自己懷疑自己, 我們究竟當上了這個角色, 能夠有甚麼進一步的貢獻與價值?

    當我這陣子寫部落格之後, 翻查自己曾經做過案子的照片, 覺得… 工作上好像也沒那麼糟糕, 這行業的內在價值, 就是讓這些中小企業工廠能夠挺過Covid-19以及用合理的價錢得到相對應國外的服務品質, 甚至讓這些老闆能夠繼續專注他們能提升營利的項目。

    我們甚至會提供一些商業觀察給業主們參考, 讓他們能夠找到另一個標的繼續努力….

    也因為這些堅持, 登門檻效應發揮作用, 你想實作一些更強更新的應用時, 就有了所謂的“實作平台”

    用望遠鏡觀察長遠目標的性格來當作Fillter, 你會發現…. 撐得過最後那幾里路的人, 那種人就是關鍵人脈。

    (不是叫你等人家成功了, 就去抱人家大腿之類的喔🤣 )

    後來觀察到這種人, 本身已經不是興趣使然了, 而是用企圖心蓋過自己厭倦感+厭世感!

    <外在價值>

    外在價值, 不用多講就是薪水+福利了, 我後來選擇接案的原因多半因為在外平常開銷大, 已經聽過以及看到很多人往南求職或選擇外商的經驗, 甚至有能力的人選擇出國. (出國的話又是另外一回事了)

    但更重要的是那些累積從0到1的斗M經驗。

    不過這個選擇也沒有比做分工明確的來得輕鬆就是了 😖.

    結語

    你的每個行為, 每個策略以及每個在你自己身上的投資都是微小的選擇。

    畢竟這個時代變化速度之快, 會不會某些職業很快就會消失了呢?

    消失了以後, 你的下一份工作是注重它的外在價值? 還是內在價值? 還是都要呢 🤣

    把生命當成目的本身, 而非達成目的的手段。

  • CSS-決定主軸對齊方式/Justify-content

    CSS-決定主軸對齊方式/Justify-content

    給於肝肝工程師小額捐款'v': ETH/ERC20
    0xd20c50c82450ee288711bf5e3f9238bc816c168a

    參考資料:

    六角學院

    https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

    MDN_WEB 網站提供的測試範例

    https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

    複習軸軸

    我們再複習一遍主軸是甚麼?

    主軸方向flex-direction先確認!

    Row 方向

    HTML 文本

    我們今天更改的範圍是 : container

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="CSS/Flex-justify-content.css">
    <title>Flex-Direction </title>
</head>


<body>

    <div class="container">

        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
        <div class="item item4">4</div>
        <div class="item item5">5</div>

    </div>

</body>

</html>

    CSS_Ver1.0

    .container {
    display: flex;
    width: auto;
    height: auto;
    background-color: blue;

    flex-direction:row;  
}

.item {
    width: 150px;
     height: 50px;

    background: #00ffa2;
    color: #033b56;
    font-style: initial;
    text-align: center;
    font-size: 35px;

}

    Flex-direction =row >> 從左到右

    來看看Justify-Content

    space-between 方法

    CSS_Ver2.0

    .container {
    display: flex;
    width: auto;
    height: auto;
    background-color: blue;

    flex-direction:row;  
    justify-content:space-between;
}

.item {
    width: 150px;
     height: 50px;

    background: #00ffa2;  
    color: #033b56;
    font-style: initial;
    text-align: center;
    font-size: 35px;

}

    flex-start 方法

    CSS_Ver3.0

    .container {
    display: flex;
    width: auto;
    height: auto;
    background-color: blue;

    flex-direction:row;  
    justify-content:flex-start;
}

.item {
    width: 150px;
     height: 50px;

    background: #00ffa2;  
    color: #033b56;
    font-style: initial;
    text-align: center;
    font-size: 35px;

}

    其實就是保持flex 效果的原狀態。

    結語
    在測試順序上, 我們大多從Flex-direction 開始定義
    之後再去調整Justify-content, 藉此調整主軸排列方式。
    有順序概念會比較不容易搞混!

  • JS-Not Defined VS undefined 還有Null

    當看完JS-提升之後, 為了加深記憶體區塊”空的”概念, 我們來探討一下

    下方有一篇原文網站GeeksforGeeks, 內容講述此現象:

    https://www.geeksforgeeks.org/javascript-referenceerror-variable-is-not-defined/

    給予肝肝的工程師小額捐款'V': ETH/ERC20
    0xd20c50c82450ee288711bf5e3f9238bc816c168a

    主要區分以下

    • Not Defined
    • Undefined

    <Not Defined >

    // let a;  
console.log(a);
console.log(typeof a);

    解釋:

    當你的記憶體區塊 let a , 並沒有宣告時

    你的瀏覽器將抓不到”a”

    這就是所謂的: Not Defined

    <Undefined >

    let b;
console.log(b);

    解釋:

    當你的記憶體區塊 let b 存在時

    你的瀏覽器將抓到的是這個 記憶體區塊

    但是你並沒有賦予值

    所以只會有: Undefined

    *那你會想問… null 的特性怎麼跟undefined那麼像??

    <Null > 空值

    一般我們在VB.Net、C#、JAVA 這些程式語言裡面…

    VB.Net :

    Dim C As Interger = 32

    C#:

    Int C =32;

    JAVA: 

    Int C =32;

    你會發現, 以上語言都必須先“宣告型態”,也就是我們本文章所講的記憶體區塊.

    後面按照需求, 賦予該記憶體區塊一個值.

    但是 Javascript不一樣, Javascript本身是一種需要被解釋的語言, 而且不用宣告型態就可以直接賦予值

    let a ;
a=1;
c=null;
d=11;

console.log(a);
console.log(c);
console.log(d);

    解釋

    你會發現… c 被賦予 null(空值), 通常這個變數內有值時, 就可以用這個方式清空.

    d 沒有記憶體區塊, 卻照樣可以直接被賦予值

    為求謹慎, 我們來看看 c、d 的Type 是甚麼好了

    let a ;
a=1;
c=null;
d=11;

console.log(a);
console.log(c);
console.log(d);
console.log(typeof c);
console.log(typeof d);

    解釋

    c 的型態為object (物件)

    d 單純就是變量

    結語

    看似很簡單, 講起來卻很繞口…

    藉由探討 Javascript 的語言特性與記憶體區塊 對後續優化網站有很大的幫助.

    希望這樣看到文章的Programmer 能夠有所幫助喔!

  • JS-Hoisting提升

    想必這個是踏入JavaScript第一個大魔王吧!? (疑

    首先我們要提2個階段:

    • 創造階段
    • 執行 
    給予肝肝的工程師小額捐款'v' ETH/ERC20
    0xd20c50c82450ee288711bf5e3f9238bc816c168a

    參考資料: 六角學院

    範例1:  
function callname(){
    console.log('Jen');
    //Jen 這個callname() 裡面的內容已經被完整的創造
}

callname();
    範例2:  
callname();

function callname(){
    console.log('Jen');
    //Jen 這個callname() 裡面的內容已經被完整的創造
}

    範例1~2的輸出結果

    解釋:

    Function 函式會優先被創造( 提升 )

    內容陳述式也是! *不包含記憶體區塊

    你會發現, 函式內容為”字串” 陳述式

    下一段改成”變數內容”, 會怎麼樣呢??

    變數_內容

    範例3
//創造階段
function callname(){
    console.log(Jen);
    //Jen沒有創造階段, 沒有記憶體空間, 也沒有執行
}

//執行
callname();

    範例3的輸出結果

    我們將範例3 ,var變數進行創造 “記憶體區塊”

    //創造階段
var  Jen 
function callname(){
    console.log(Jen);
    //Jen 在創造階段已經有記憶體區塊
}

//執行
callname();

    解釋:

    對於var 創造, 會將var 宣告的動作宣稱 “提升”

    會發現僅僅是沒在 記憶體區間內 給予 “數值”。

    好啦! 給予Jen 一個數值之後

    範例4
//創造階段
var  Jen =1;

///創造階段
function callname(){
    console.log(Jen);
    
}

//執行階段 此時才會把 Jen= 1 賦予值
callname();

    解釋:

    第一行 var Jen =1; 將記憶體區間宣告出來 = “提升”

    要到了callname() 執行階段, var Jen 才會被賦予 = 1

    我把第一行 var Jen=1

    移動到Function 後方檢驗看看?? 

    範例5
function callname(){
    console.log(Jen);
    
}

var Jen=1;
callname();

    Funtion 之後, var Jen=1 執行創造階段 (提升)

    再來從執行階段>> callname() 將賦予值給 Jen

    一樣按照 :

    • 創造階段
    • 執行

    結語

    • Function & 內部陳述式, 優先Hoisting /提升
    • var 宣告記憶體區間 Hoisting /提升

    這只是第一階段的提升觀念
    畢竟先了解創造>>執行的順序, 之後把各種觀念加進去, 對於往後對JS的深度語法有很大的幫助喔!

  • CSS-主軸Flex -direction

    在看Flex-direction的同時, 我們必須先搞清楚 2個Keyword

    • 主軸
    • 交錯軸

    參考資料: 六角學院

    主軸

    交錯軸

    交錯軸: 與主軸垂直的軸

    交錯軸之後會再來談談!

    (主軸)Flex-Direction

    Row方向

    row的意思: 由左往右排列

    Row-reverse 方向

    顧名思義: 將Row的順序反過來排列

    Column方向

    意思就是: 由上到下的排列

    Column-reverse

    顧名思義: 將Column順序反過來排列

    總結
    本節主要是先讓你看過範例知道
    主軸在Flex排列裡面扮演的角色
    接下來將會介紹
    Justify-content/決定主軸對齊方式。