https://x-team.com/blog/css-grid-vs-flexbox/ 參考資料: https://sharkcoder.com/layout/flexbox 當你開始寫CSS 的時候, 你會知道... 層級概念 換句話說: 外層(父層) : 決定軸方向、Flex 的方式 內層(子層) : 內部屬性調整 From 六角學院 外層_Container HTML 文本…
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>…
在看Flex-direction的同時, 我們必須先搞清楚 2個Keyword 主軸 交錯軸 參考資料: 六角學院 主軸 交錯軸 交錯軸: 與主軸垂直的軸 交錯軸之後會再來談談! (主軸)Flex-Direction Row方向 row的意思: 由左往右排列 Row-reverse 方向 顧名思義: 將Row的順序反過來排列…
Front-end Notes CSS Flex 一開始只要記住一點! display:flex 這一定要宣告 HTML <body> <div class="container"> <div class="item item1">1</div>…