重新了解 Flex 和 Grid 排版特性,並且用自己的文字解釋給大家。內容會先簡單前提學 CSS 切版會接觸到的相關知識,然後前半段介紹現在較為流行的 Flex ,後半段則是 Grid。
開賽阿!! 工程師轉職的路上,靈魂不小心跌入充滿 code 的洪流裡 . . . 切版之神:「請問你掉的是 Flexbox 還是 Grid ?」 我:「喔沒欸....
「你說說,為什麼我只是要排個版還要知道 W3C?」 恩 . . .不好奇一下你寫的東西是怎麼來的嗎?寫的東西是誰訂的?為什麼寫了就能動?如果不去追究這些,也不會...
「誰掌握了過去,誰就掌握了未來」 ——《1984》 既然主題和切版有關,當然要來簡單了解一下切版(黑)歷史啊 XD,認識過去的排版思維以及排版的進展(還有痛苦的...
Flexbox(彈性盒子),全名 CSS Flexible Box Module Level 1(https://www.w3.org/TR/css-Flexb...
.container { display: flex | inline-flex; } 上一篇提到當我們對 container 宣告 display:...
軸向 你可能會好奇為什麼學 flexbox 要認識"軸向",但在善於控制一維(上下、左右)的 flexbox 世界,要能控制排列的方向和順序...
上一篇在談論到相交軸時,提到:「彈性項目單行的數量多到超過容器,你想要讓它換行,它就會以相交軸的方向換行。」所以接下來就會介紹換行的屬性 flexbox 換行...
接下來幾個屬性都和對齊有關,其中 justify-content 這個屬性擅長於操控"主軸上彈性項目的分布",非常適合拿來調整內容。 注意:...
接下來幾個屬性都和對齊有關,其中 align-content 這個屬性擅長於操控"相交軸上彈性項目的分布",也非常適合拿來調整內容。 如果你...
接下來幾個屬性都和對齊有關,其中 align-items 這個屬性擅長於操控"相交軸上彈性項目的對齊位置",也非常適合拿來調整內容。 如果你...