盒子模型 · 编程开发笔记

> ## :-: [伸缩盒子](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; } ```