盒子模型 · 編程開發筆記

> ## :-: [伸縮盒子](http://css.doyoe.com/properties/flex/index.htm) ``` .wrap { width: 400px; height: 300px; border: 1px solid red; /* --------------- 作用在父級上的 --------------- */ /* 父級改變為伸縮盒子 (特點：主軸x/y 的子級不會溢出父級盒子，即使內容原本是超出父級的，也會被擠壓排列) */ display: flex; /* 配合使用，改變排列的主軸方向 (水平/垂直) flex-direction 水平排列默認值 -- → row 行水平相反 -------- ← row-reverse ( reverse 意思：背面；相反；倒退) 垂直排列 --------- ↓ column 列垂直相反 -------- ↑ column-reverse */ flex-direction: row; /* flex-wrap 設置盒子中的子級是否換行，不允許換行 -- nowrap 默認值,超出父級的子級box會被擠壓(寬度變小) 允許換行 -- wrap，效果類似于float: left;超出父級的子級box會折行展示 */ flex-wrap: wrap; /* justify-content 改變基于主軸的對齊方式正向對齊默認值 flex-start (左\上對齊) 反向對齊 ------ flex-end (與flex-start相反) 居中對齊 ------ center 分散對齊 ------ space-between (會自適應留出間距) 類似于分散對齊(不好描述) ------ space-around */ justify-content: space-around; /* align-items 基于交叉方向的對齊方式控制單行的劇中對齊 ------ center 正向對齊 ------ flex-start 反向對齊 ------ flex-end */ align-items: center; /* align-content 基于交叉抽多行排列位置的分配、控制多行的劇中對齊 ------ center 正向對齊 ------ flex-start 反向對齊 ------ flex-end */ align-content: center; /* 單行在父級設置下面兩個屬性則為水平垂直劇中 justify-content: center; align-items: center; */ /* 多行在父級設置下面兩個屬性則為水平垂直劇中 justify-content: center; align-content: center; */ } .wrap .box { box-sizing: border-box; width: 100px; height: 100px; border: 1px solid black; /* --------------- 作用在子級上的 --------------- */ } .wrap .box:nth-of-type(3) { /* --------------- 作用在子級上的 --------------- */ /* 類似于z-index，改變排序的權重 (原本在第3個的元素，可以讓它排到頭/尾部) 默認值為0 填負數時元素靠前排列填正數時元素靠后排列 */ order: -1; /* 在交叉軸中，打破父級給于的排列方式，子級按自己的方式排列 (子級的權重高于父級) 在多行中不起作用即父級為 align-content: center; 默認值 auto 聽父級的、、中 -- center 正 -- flex-start 反 -- flex-end */ align-self: flex-end; } ``` > ## :-: [彈性盒子](http://css.doyoe.com/properties/flex/flex.htm) ``` .wrap { width: 400px; height: 300px; border: 1px solid red; /* --------------- 作用在父級上的 --------------- */ /* 父級改變為伸縮盒子 (特點：主軸x/y 的子級不會溢出父級盒子，即使內容原本是超出父級的，也會被擠壓排列) */ display: flex; /* 配合使用，改變排列的主軸方向 (水平/垂直) flex-direction 水平排列默認值 -- → row 行水平相反 -------- ← row-reverse ( reverse 意思：背面；相反；倒退) 垂直排列 --------- ↓ column 列垂直相反 -------- ↑ column-reverse */ /* 主軸為水平排列 */ flex-direction: row; flex-wrap: nowrap; } .wrap .box { box-sizing: border-box; width: 100px; height: 100px; border: 1px solid black; /* --------------- 作用在子級上的 --------------- */ /* flex-grow 伸縮，按比例平均分配填滿主軸的內容區、、(不好描述) 假設父級盒子為400,400 子級為方塊100,100 此時還多出100的區域，這時當flex-grow: 1;子級的寬度就會變成125px。平均劃分，占滿主軸的內容區元素 1、2、3 分別設置flex-grow: 1; 2 ;3; 即為按 1:2:3 比例占滿主軸的內容區默認值為0 */ flex-grow: 1; /* flex-basis 類似于width，但它的權重高于width，會破壞原本的寬度 (就當它是改變元素寬度的) */ flex-basis: 30px; /* flex-shrink 與flex-grow類似，是基于內容區(content)的真實寬度來參與計算的 */ flex-shrink: 1; } ``` > ## :-: Demo - 實例 ```  <div class="wrap"> <div class="box">1</div> </div> /* ———————————————————————————————— */ .wrap { resize: both; overflow: hidden; width: 300px; height: 300px; display: flex; justify-content: center; align-items: center; border: 1px solid black; } .wrap .box { width: 100px; height: 100px; border: 1px solid red; } ```