<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-1{ width:calc(100%/12); padding-left:10px; padding-right:10px; } .col-2{ width:calc(100%/12*2); padding-left:10px; padding-right:10px; } .col-12{ width: 100%; padding-left:10px; padding-right:10px; }補充4.變數共用
:root { --text-green: #57A203; } .cgreen { color: var(--text-green); }補充5.手機板禁用X軸(下方左右卷軸),設定了固定的width就會產生此問題
補充6.max-width取代width,最好在最外層的container要設一下,解決補充5方法
1.如果父元素比較寬時,保持既有寬度 2.如果父元素比較窄時,依父元素寬度自動調整補充7.Flex依比例調整寬度,下為左占2右邊占3
.left{ flex:2; } .right{ flex:3; }補充8.格線系統響應式小方法
@media screen and(max-width: 768px){ [class*="col-"]{ width:100%; } }補充9 權重
HTML 標籤:1 分 class 選擇器:10 分 ID 選擇器:100 分 inline style:1000 分 !important:10000 分 html body .container .box{22分} .box.box.box{30分}補充10圖片改變大小時換圖
<picture> <!-- 當螢幕寬度少於992px時,替換圖片 --> <source srcset="./images/M2.png" media="(max-width: 992px)"> <!-- 預設圖片,通常是桌面版本 --> <img src="./images/M1.png" alt="Logo"> </picture>參考資料
flex
六角線上課