弹性盒子：
作用：弹性盒子控制子元素的布局方法（不包括孙子辈）
特点：
a，弹性盒子默认情况下，子元素沿着主轴排列，默认情况下x轴为主轴
b，弹性盒子的子元素，称作‘灵活元素’所有的子元素都能设置宽高
c，如果一个子元素在弹性盒里面左右上下居中只需要给子元素添加margin： 0 auto；
1、触发弹性盒：
display：flex；
2、改变主轴的方向（加在父元素上面）
flex-direction：；
属性值： row x轴为主轴
column y轴为主轴
row-revers x轴主轴反向排列
column-revers y轴主轴反向排列
3、控制主轴对齐方式：
justify-content：；
属性值：
flex-start 弹性盒子开始位置
flex-end 弹性盒子结束位置对齐
center 居中对齐
space-between 二端对齐
space-around 自动分配间距
4、侧轴对齐方式（父元素上面）
align-items：；
属性值：
flex-start 侧轴开始
flex-end 结束
center 居中
baseline flex-stare等效
stretch（默认值）拉伸
5、弹性盒子元素不会换行（在主轴挤压）是否让子元素超出的时候换行
flex-wrap：
属性值：
nowrap 不换行
wrap 换行
wrap-revers 底部对齐换行
6、控制行与行之间的间距
align-content：；
属性值：
flex-start 开始
flex-end 结束
center 居中
space-between 二端对齐
space-around 自动分配
7、flex-flow：；
flex-direction和flex-wrap
flex-flow：column wrap；
添加子元素上面的元素：
8、控制某一个子元素在侧轴对齐方式
align-self：
auto 默认值
stretch 拉伸
center 居中
flex-start 元素位于容器开头
flex-end 结尾
9、控制子元素的排列顺序：
order 属性值是个数字，数字越大越往后排列，能接受负数
10、剩余空间分配：
flex：1； 把剩余空间全部分配给当前元素
多列：
1、分为几列显示
column-count：；
2、每一列的间隔大小
成column-gap：；
3、每一列的间隔线条
column-rule：10px solid red；
4、适应列的高度
column-fill：；
auto 每一列高度和宽度同高
balance
5、横跨所有的列（用于标题）
cloumn-span：all；
6、column-width：；
7、columns：；
是column-count和cloumn-width的简写
cloumns：3 200px；
防止元素断裂：
break-inside：avoid；
监测设备的特性分辨率，宽度，横屏，竖屏，更改某些元素的css样式
媒体查询：
媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成
语法：（媒体查询一般放在css代码后面）
@media 媒体类型 and （表达式） and（表达式）{ }
设备类型： all screen
表达式：监测设备的条件
not （排除某种设备）
关键字：
and二侧必须加空格
not放在媒体类型前面
媒体查询：做样式微雕的
文字大小 内容的显示会隐藏 浮动
横屏：orientation：landscape；
竖屏：orientation：portrait；
准备工作：视口meta标签 禁止用户缩放1:1:1
分辨率：
ppi：每英寸所显示的像素点的密度ppi值越大分辨率越高
dpi：每英寸所显示像素点的个数
dpr：设备像素比
dpr == 物理像素/逻辑像素
物理像素：设备真正所显示的像素（截图解出来的750px设计图）
逻辑像素：css中设置的像素
根据设计图获取dpr：
如果设计图宽度是640px或者是750px的时候 dpr为2
如果设计图大于750px dpr为3
单位：
px
pt（磅）
em
%
deg（度数）
rem 相对大小，相对于html的font-size值 默认大小：1rem== 16px
css里面rem值的确定：
加入设计图为750px 所以考虑dpr为2
从设计量出宽度为200px 200px/dpr2 == 100px
为了方便巨酸html的font-size值设置为100px == 1rem
ps中量取168px 考虑dpr为2 又因为html中font-size==100px 1rem==100px
168px/100px = 1.68rem
转rem流程：ps中量出的大小/dpr/html 中font-size的值 == rem；
vw 视口的宽
100vw == 视口宽度的100%；
vh 视口的高
100vh == 视口高度的100%；
vmin
eg：10vmin
比较视口的宽高 谁小就是谁的10%；
媒体查询样式微调：
@media all and （max-width：320px）
@media all and （min-width：321px） and （max-width：375px）{ }
原文地址：https://www.cnblogs.com/ht955/p/13871839.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。