flex佈局開發 1. 佈局原理 flex時flexible Box的縮寫，意為“彈性佈局”，用來為盒子模型提供最大的靈活性，任何一個容器都可以定位flex佈局 【註意】 當我們為父盒子設為flex佈局以後，子元素的float、clear和vertical align屬性將失效 伸縮佈局=彈性佈局= ...
flex佈局開發
佈局原理
- flex時flexible Box的縮寫，意為“彈性佈局”，用來為盒子模型提供最大的靈活性，任何一個容器都可以定位flex佈局
- 【註意】
- 當我們為父盒子設為flex佈局以後，子元素的float、clear和vertical-align屬性將失效
- 伸縮佈局=彈性佈局=伸縮盒佈局=彈性盒佈局=flex佈局
常見父項屬性
flex-direction：設置主軸的方向
flex-direction屬性值決定主軸的方向（及項目的排列方向）
【註意】
主軸和側軸是會變化的，就看flex-diretion設置誰為主軸，剩下的就是側軸，子元素是跟著主軸來排列的
屬性值 說明 row 預設值從左到右 row-reverse 從右到左 column 從上到下 column-reverse 從上到下
justify-content：設置主軸上的子元素排列方式
【註意】
使用這個屬性之前要確定好主軸是哪個
屬性值 說明 flex-start 預設值 從頭部開始 如果主軸是x軸，則從左到右 flex-end 從尾部開始排列 center 在主軸居中對齊 space-around 平分剩餘空間 space-between 先兩邊貼邊 在平分剩餘空間
flex-wrap：設置子元素是否換行
屬性值 說明 nowrap 預設值，不換行 wrap 換行
align-content：設置側軸上的子元素的排列方式（多行）
屬性值 說明 flex-start 從上到下 flex-end 從下到上 center 垂直居中 strech 拉伸（預設值）【項目不要給高度】 space-around 子項在側軸平分剩餘空間 stretch 設置子項元素高度平分元素高度 align-items：設置側軸上的子元素排列方式（單行）
屬性值 說明 flex-start 從上到下 flex-end 從下到上 center 垂直居中 strech 拉伸（預設值）【項目不要給高度】 flex-flow：複合屬性，相當於同時設置了flex-direction和flex-wrap
子項常見屬性
flex子項占的分數
.item{ flex:<number>; }align-self控制子項子級在側軸的排列方式
- align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性
預設值是auto，表示繼承父元素align-items屬性，如果沒有父元素，則等同於stretch
order屬性定義子項的排列順序（前後順序）
- 數值越小排列越靠前
