https://x-team.com/blog/css-grid-vs-flexbox/ 參考資料: https://sharkcoder.com/layout/flexbox 當你開始寫CSS 的時候, 你會知道… 層級概念 換句話說: 外層(父層) : 決定軸方向、Flex 的方式 內層(子層) : 內部屬性調整 外層_Container HTML 文本 將<div> 分隔標籤寫出來，方便接下來做外層的演示。 CSS 裝飾語言 外層Contianer 結果顯示 內層_Item […]
CSS-主軸Flex -direction
在看Flex-direction的同時, 我們必須先搞清楚 2個Keyword 參考資料: 六角學院 主軸 交錯軸 交錯軸: 與主軸垂直的軸 交錯軸之後會再來談談! (主軸)Flex-Direction Row方向 row的意思: 由左往右排列 Row-reverse 方向 顧名思義: 將Row的順序反過來排列 Column方向 意思就是: 由上到下的排列 Column-reverse 顧名思義: 將Column順序反過來排列 總結本節主要是先讓你看過範例知道主軸在Flex排列裡面扮演的角色接下來將會介紹Justify-content/決定主軸對齊方式。
CSS-Flex 初步試探
Front-end Notes CSS Flex 一開始只要記住一點! display:flex 這一定要宣告 HTML <body> <div class=”container”> <div class=”item item1″>1</div> <div […]