<div class="container"></div> .container{ display: flex; }2.外層容器屬性
2-1 主軸 justify-content
justify-content: center; justify-content: flex-start; justify-content: flex-end; justify-content: space-between;左右"不"留白等距 justify-content: space-around; 左右留白等距2-2 主軸方向 flex-direction
flex-direction: row; flex-direction: row-reverse; flex-direction: column; flex-direction: column-reverse;2-3 主軸換行 flex-wrap
flex-wrap: nowrap; flex-wrap: wrap; flex-wrap: wrap-reverse;2-4 交錯線 align-items
常用如下更多請看下方參考資料 align-items: flex-start; align-items: flex-end; align-items: center; align-items: stretch;補充1容器內容分離,容器僅負責定位
補充2搭配以下語法可減少計算失誤
*{ box-sizing: border-box; } *,*::before,*::after { box-sizing: border-box; }補充3如果為顯示類似購物車,可多一個col div來當容器
.col{ width:33% padding-left:10px; padding-right:10px; }補充4變數共用
:root { --text-green: #57A203; } .cgreen { color: var(--text-green); }參考資料
flex
六角線上課