CSS Flex練習 & 補充

1.將容器設定成flex

<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
六角線上課