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;
justify-content: space-evenly;
justify-content: stretch; 

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;

補充1容器內容分離，容器僅負責定位
補充2搭配以下語法可減少計算失誤

*{
 box-sizing: border-box;
}

補充3如果為顯示類似購物車，可多一個col div來當容器

.col{
 width:33%
 padding-left:10px;
 padding-right:10px;
}

參考資料
flex
六角線上課