https://x-team.com/blog/css-grid-vs-flexbox/ 參考資料: https://sharkcoder.com/layout/flexbox 當你開始寫CSS 的時候, 你會知道… 層級概念 換句話說: 外層(父層) : 決定軸方向、Flex 的方式 內層(子層) : 內部屬性調整 外層_Container HTML 文本 將<div> 分隔標籤寫出來，方便接下來做外層的演示。 CSS 裝飾語言 外層Contianer 結果顯示 內層_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 文本 CSS 裝飾語言 演示結果
CSS-決定主軸對齊方式/Justify-content
給於肝肝工程師小額捐款’v’: ETH/ERC20 參考資料: 六角學院 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 CSS_Ver1.0 Flex-direction =row >> 從左到右 來看看Justify-Content space-between […]
CSS-主軸Flex -direction
在看Flex-direction的同時, 我們必須先搞清楚 2個Keyword 參考資料: 六角學院 主軸 交錯軸 交錯軸: 與主軸垂直的軸 交錯軸之後會再來談談! (主軸)Flex-Direction Row方向 row的意思: 由左往右排列 Row-reverse 方向 顧名思義: 將Row的順序反過來排列 Column方向 意思就是: 由上到下的排列 Column-reverse 顧名思義: 將Column順序反過來排列 總結本節主要是先讓你看過範例知道主軸在Flex排列裡面扮演的角色接下來將會介紹Justify-content/決定主軸對齊方式。
CSS-Margin & Padding
控制視窗與Stack之間的Layout邊界屬性 給於肝肝工程師小額捐款: ETH/ERC20 在我們剛開始寫CSS 的時候,我常常把Margin 與Padding 搞混 藉由這次機會, 我在這邊隨手做紀錄一下。 首先, 這張圖片裡面, 各種結構+屬性關係先弄熟! 參考: Margin and Padding – Xamarin | Microsoft Docs 範例測試 HTML 先用2個 Block […]
CSS-Flex 初步試探
Front-end Notes CSS Flex 一開始只要記住一點! display:flex 這一定要宣告 HTML <body> <div class=”container”> <div class=”item item1″>1</div> <div […]